root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(style): text overflow

Browse Source
This commit is contained in:
jialin
2024-10-25 18:36:18 +08:00
parent ba49fa6c88
commit abdc78e123
14 changed files with 119 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/resource-utilization.tsx
-5
View File
@@ -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
+2 -2
View File
@@ -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
+8 -7
View File
@@ -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
+6
View File
@@ -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
+5
View File
@@ -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
+24 -5
View File
@@ -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
+13 -63
View File
@@ -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 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
// }
// };
// })
// ]
// };
// });
const codeValue = useMemo(() => {
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);
} else if (lang === langMap.javascript) {
return code;
}
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);