fix(style): text overflow

config/config.ts

@@ -14,7 +14,7 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy('http://192.168.50.3')
+    ...proxy()
   },
   history: {
     type: 'hash'

src/components/auto-tooltip/index.tsx

@@ -1,5 +1,5 @@
 import { Tag, Tooltip, type TagProps } from 'antd';
-import debounce from 'lodash/debounce';
+import { throttle } from 'lodash';
 import React, {
   useCallback,
   useEffect,
@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import TitleTip from './title-tip';
 
 // type TagProps = React.ComponentProps<typeof Tag>;
 
@@ -34,6 +35,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const resizeObserver = useRef<ResizeObserver>();
 
   const checkOverflow = useCallback(() => {
     if (contentRef.current) {
@@ -42,19 +44,14 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
     }
   }, [contentRef.current]);
 
-  const debouncedCheckOverflow = useMemo(
-    () => debounce(checkOverflow, 200),
-    [checkOverflow]
-  );
-
   useEffect(() => {
-    checkOverflow();
+    const debouncedCheckOverflow = throttle(checkOverflow, 200);
     window.addEventListener('resize', debouncedCheckOverflow);
     return () => {
       window.removeEventListener('resize', debouncedCheckOverflow);
       debouncedCheckOverflow.cancel();
     };
-  }, [checkOverflow, debouncedCheckOverflow]);
+  }, [checkOverflow]);
 
   useEffect(() => {
     checkOverflow();
@@ -74,7 +71,17 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
 
   return (
     <Tooltip
-      title={isOverflowing || showTitle ? title || children : ''}
+      overlayInnerStyle={{ paddingInline: 0 }}
+      destroyTooltipOnHide={false}
+      title={
+        <TitleTip
+          isOverflowing={isOverflowing}
+          title={title}
+          showTitle={showTitle}
+        >
+          {children}
+        </TitleTip>
+      }
       {...tooltipProps}
     >
       {ghost ? (

src/components/auto-tooltip/title-tip.tsx

@@ -0,0 +1,31 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import React from 'react';
+
+interface TitleTipProps {
+  isOverflowing: boolean;
+  showTitle: boolean;
+  title: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const TitleTip: React.FC<TitleTipProps> = (props) => {
+  const { isOverflowing, showTitle, title, children } = props;
+  const { initialize } = useOverlayScroller();
+  const scrollRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      initialize(scrollRef.current);
+    }
+  }, [initialize, scrollRef.current]);
+
+  return (
+    <div style={{ maxHeight: 200, overflowY: 'auto' }} ref={scrollRef}>
+      <div style={{ width: 'max-content', maxWidth: 250, paddingInline: 10 }}>
+        {isOverflowing || showTitle ? title || children : ''}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(TitleTip);

src/components/highlight-code/code-viewer.tsx

@@ -73,6 +73,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
       }}
     >
       <code
+        style={{ minHeight: height }}
         className={highlightedCode.className}
         dangerouslySetInnerHTML={{
           __html: highlightedCode.value

src/components/logs-viewer/index.less

@@ -9,9 +9,11 @@
 
     button {
       color: rgba(255, 255, 255, 70%);
+      background-color: rgba(71, 71, 71, 100%);
 
       &:hover {
         color: rgba(255, 255, 255, 90%) !important;
+        background-color: rgba(71, 71, 71, 100%) !important;
       }
     }
   }

src/components/logs-viewer/index.tsx

@@ -3,7 +3,7 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import '@xterm/xterm/css/xterm.css';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CopyButton from '../copy-button';
 import './index.less';
 import useParseAnsi from './parse-ansi';
@@ -90,6 +90,13 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     updateScrollerPosition(0);
   }, 200);
 
+  const copyText = useMemo(() => {
+    if (!logs.length) {
+      return '';
+    }
+    return logs?.map((item) => item.content).join('\n');
+  }, [logs]);
+
   useEffect(() => {
     createChunkConnection();
     return () => {
@@ -121,11 +128,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   return (
     <div className="logs-viewer-wrap-w2">
       <span className="copy">
-        <CopyButton
+        <CopyButton text={copyText} type="text" size="small"></CopyButton>
-          text={logs?.map((item) => item.content).join('\n')}
-          type="text"
-          size="small"
-        ></CopyButton>
       </span>
       <div
         className="wrap"

src/components/version-info/index.tsx

@@ -11,7 +11,7 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
   const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version;
 
   const isProd =
-    currentVersion !== '0.0.0' && currentVersion.indexOf('rc') === -1;
+    currentVersion !== '0.0.0' && currentVersion?.indexOf('rc') === -1;
 
   const uiVersion = document.documentElement.getAttribute('data-version');
 

src/pages/dashboard/components/resource-utilization.tsx

@@ -5,11 +5,6 @@ import _ from 'lodash';
 import { memo, useContext, useMemo } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
-const chartColorMap = {
-  tickLineColor: 'rgba(217,217,217,0.5)',
-  axislabelColor: 'rgba(0, 0, 0, 0.4)'
-};
-
 const TypeKeyMap = {
   cpu: {
     label: 'CPU',

src/pages/llmodels/components/model-card.tsx

@@ -60,7 +60,7 @@ const ModelCard: React.FC<{
     }
   };
 
-  const removeMetadata = (str: string) => {
+  const removeMetadata = useCallback((str: string) => {
     let indexes = [];
     let index = str.indexOf('---');
 
@@ -75,7 +75,7 @@ const ModelCard: React.FC<{
       return str.slice(indexes[1] + 3);
     }
     return str;
-  };
+  }, []);
 
   // huggingface model card data
   const getHuggingfaceModelDetail = async () => {

src/pages/playground/components/ground-left.tsx

@@ -10,6 +10,7 @@ import {
   memo,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -51,7 +52,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const currentMessageRef = useRef<any>(null);
   const paramsRef = useRef<any>(null);
   const messageListLengthCache = useRef<number>(0);
-  const [viewCodeMessage, setViewCodeMessage] = useState<any[]>([]);
 
   const { initialize, updateScrollerPosition } = useOverlayScroller();
   const { initialize: innitializeParams } = useOverlayScroller();
@@ -68,6 +68,13 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
+  const viewCodeMessage = useMemo(() => {
+    return generateMessages([
+      { role: Roles.System, content: systemMessage },
+      ...messageList
+    ]);
+  }, [messageList, systemMessage]);
+
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
   };
@@ -134,10 +141,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       setMessageList((pre) => {
         return [...pre, ...currentMessageRef.current];
       });
-      console.log('messageList:', [
-        ...messageList,
-        ...currentMessageRef.current
-      ]);
 
       const messageParams = [
         { role: Roles.System, content: systemMessage },
@@ -147,8 +150,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       const messages = generateMessages(messageParams);
 
-      setViewCodeMessage(messages);
-
       const chatParams = {
         messages: messages,
         ...parameters,

src/pages/playground/components/message-input.tsx

@@ -242,6 +242,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
 
   const handleOnPaste = (e: any) => {
     e.preventDefault();
+
     const text = e.clipboardData.getData('text');
     if (text) {
       const startPos = e.target.selectionStart;
@@ -253,6 +254,11 @@ const MessageInput: React.FC<MessageInputProps> = ({
           text +
           message.content.slice(endPos)
       });
+      if (endPos !== startPos) {
+        setTimeout(() => {
+          e.target.setSelectionRange(endPos, endPos);
+        }, 0);
+      }
     } else {
       getPasteContent(e);
     }

src/pages/playground/components/multiple-chat/content-item.tsx

@@ -116,6 +116,11 @@ const ContentItem: React.FC<MessageItemProps> = ({
           data.content.slice(0, startPos) + text + data.content.slice(endPos),
         uid: data.uid
       });
+      if (endPos !== startPos) {
+        setTimeout(() => {
+          e.target.setSelectionRange(endPos, endPos);
+        }, 0);
+      }
     } else {
       getPasteContent(e);
     }

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -67,10 +67,16 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const currentMessageRef = useRef<MessageItem[]>([]);
     const modelScrollRef = useRef<any>(null);
     const messageListLengthCache = useRef<number>(0);
-    const [viewCodeMessage, setViewCodeMessage] = useState<any[]>([]);
 
     const { initialize, updateScrollerPosition } = useOverlayScroller();
 
+    const viewCodeMessage = useMemo(() => {
+      return generateMessages([
+        { role: Roles.System, content: systemMessage },
+        ...messageList
+      ]);
+    }, [messageList, systemMessage]);
+
     const setMessageId = () => {
       messageId.current = messageId.current + 1;
     };
@@ -135,8 +141,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
 
         const messages = generateMessages(messageParams);
 
-        setViewCodeMessage(messages);
-
         const chatParams = {
           messages: messages,
           ...params,
@@ -362,14 +366,29 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               options={modelFullList}
               onChange={handleModelChange}
               value={params.model}
-              optionRender={(data) => {
+              labelRender={(data) => {
                 return (
                   <AutoTooltip
-                    title={data.label}
                     ghost
                     tooltipProps={{
                       placement: 'right'
                     }}
+                    minWidth={60}
+                    maxWidth={180}
+                  >
+                    {data.label}
+                  </AutoTooltip>
+                );
+              }}
+              optionRender={(data) => {
+                return (
+                  <AutoTooltip
+                    ghost
+                    tooltipProps={{
+                      placement: 'right'
+                    }}
+                    minWidth={60}
+                    maxWidth={180}
                   >
                     {data.label}
                   </AutoTooltip>

src/pages/playground/components/view-code-modal.tsx

@@ -4,7 +4,7 @@ import { BulbOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 type ViewModalProps = {
   systemMessage?: string;
@@ -33,14 +33,12 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     title,
     open,
     onCancel,
-    systemMessage,
     messageList,
     parameters = {},
     apiType = 'chat'
   } = props || {};
 
   const intl = useIntl();
-  const [codeValue, setCodeValue] = useState('');
   const [lang, setLang] = useState(langMap.shell);
 
   const BaseURL = `${window.location.origin}/v1-openai`;
@@ -49,40 +47,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const logcommand =
     apiType === 'chat' ? 'choices[0].message.content' : 'data[0].embedding';
 
-  const generateCode = () => {
+  const codeValue = useMemo(() => {
-    // const systemList = systemMessage
-    //   ? [
-    //       {
-    //         role: 'system',
-    //         content: [
-    //           {
-    //             type: 'text',
-    //             text: systemMessage
-    //           }
-    //         ]
-    //       }
-    //     ]
-    //   : [];
-
-    // const formatMessageList = _.map(messageList, (item: any) => {
-    //   return {
-    //     role: item.role,
-    //     content: [
-    //       {
-    //         type: 'text',
-    //         text: item.content
-    //       },
-    //       ..._.map(item.imgs, (img: any) => {
-    //         return {
-    //           type: 'image_url',
-    //           image_url: {
-    //             url: img.dataUrl
-    //           }
-    //         };
-    //       })
-    //     ]
-    //   };
-    // });
     if (lang === langMap.shell) {
       const messages = messageList;
       const code = `curl ${window.location.origin}/v1-openai/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
@@ -93,8 +58,9 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         null,
         2
       )}'`;
-      setCodeValue(code);
+      return code;
-    } else if (lang === langMap.javascript) {
+    }
+    if (lang === langMap.javascript) {
       const messages = messageList;
       const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n  "apiKey": "YOUR_GPUSTACK_API_KEY",\n  "baseURL": "${BaseURL}"\n});\n\nasync function main(){\n  const params = ${JSON.stringify(
         {
@@ -104,8 +70,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         null,
         4
       )};\nconst response = await openai.${ClientType}.create(params);\n  console.log(response.${logcommand});\n}\nmain();`;
-      setCodeValue(code);
+
-    } else if (lang === langMap.python) {
+      return code;
+    }
+    if (lang === langMap.python) {
       const formattedParams = _.keys(parameters).reduce(
         (acc: string, key: string) => {
           if (parameters[key] === null) {
@@ -124,9 +92,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
           ? `messages=${JSON.stringify(messageList, null, 2)}`
           : '';
       const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${ClientType}.create(\n${formattedParams}  ${messages})\nprint(response.${logcommand})`;
-      setCodeValue(code);
+      return code;
     }
-  };
+    return '';
+  }, [lang, messageList, parameters]);
 
   const handleOnChangeLang = (value: string) => {
     setLang(value);
@@ -136,25 +105,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     setLang(langMap.shell);
     onCancel();
   };
-  const editorConfig = {
-    minimap: {
-      enabled: false
-    },
-    hover: {
-      enabled: false
-    },
-    readOnly: true,
-    formatOnType: true,
-    formatOnPaste: true,
-    fontWeight: 'bold',
-    scrollbar: {
-      verticalSliderSize: 8
-    }
-  };
-
-  useEffect(() => {
-    generateCode();
-  }, [lang, messageList, parameters]);
 
   return (
     <>
@@ -228,4 +178,4 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   );
 };
 
-export default ViewCodeModal;
+export default React.memo(ViewCodeModal);