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

fix: playground message flashing

Browse Source
This commit is contained in:
jialin
2024-07-11 14:49:57 +08:00
parent 8607815240
commit c5327d3e56
18 changed files with 130 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/theme.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export default {
iconSize: 16,
iconMarginInlineEnd: 12,
itemHeight: 44,
// itemColor: 'rgba(0,0,0,.88)',
itemColor: 'rgba(0,0,0,1)',
itemHoverBg: 'rgba(0,0,0,0.04)',
itemActiveBg: 'rgba(0,0,0,0.04)'
},
src/components/seal-form/components/label-info.tsx
+28 -13
View File
@@ -10,23 +10,38 @@ interface NoteInfoProps {
}
const NoteInfo: React.FC<NoteInfoProps> = (props) => {
const { required, description, label } = props || {};
return (
<span className="label-text">
<span>{label}</span>
<span className="note-info">
{required && (
<span style={{ color: 'red' }} className="star">
*
</span>
)}
{description && (
<span style={{ marginLeft: 5, color: 'gray' }} className="desc">
<Tooltip title={description}>
{description ? (
<Tooltip title={description}>
<span>{label}</span>
<span className="note-info">
{required && (
<span style={{ color: 'red' }} className="star">
*
</span>
)}
<span
style={{ marginLeft: required ? 5 : 0, color: 'gray' }}
className="desc"
>
<InfoCircleOutlined />
</Tooltip>
</span>
</span>
)}
</span>
</Tooltip>
) : (
<>
<span>{label}</span>
<span className="note-info">
{required && (
<span style={{ color: 'red' }} className="star">
*
</span>
)}
</span>
</>
)}
</span>
);
};
src/components/seal-table/components/table-row.tsx
+3 -2
View File
@@ -39,8 +39,8 @@ const TableRow: React.FC<
console.log('table row====');
const { updateChunkedList } = useUpdateChunkedList({
setDataList: setChildrenData,
callback: (list) => renderChildren?.(list)
setDataList: setChildrenData
// callback: (list) => renderChildren?.(list)
});
useEffect(() => {
@@ -101,6 +101,7 @@ const TableRow: React.FC<
setChildrenData([]);
setLoading(false);
} finally {
childrenDataRef.current = childrenData;
setFirstLoad(false);
}
};
src/components/seal-table/index.tsx
+2 -4
View File
@@ -30,10 +30,10 @@ const SealTable: React.FC<SealTableProps> = (props) => {
useEffect(() => {
if (rowSelection) {
const { selectedRowKeys } = rowSelection;
if (selectedRowKeys.length === 0) {
if (selectedRowKeys?.length === 0) {
setSelectAll(false);
setIndeterminate(false);
} else if (selectedRowKeys.length === props.dataSource.length) {
} else if (selectedRowKeys?.length === props.dataSource.length) {
setSelectAll(true);
setIndeterminate(false);
} else {
@@ -45,12 +45,10 @@ const SealTable: React.FC<SealTableProps> = (props) => {
const handleSelectAllChange = (e: any) => {
if (e.target.checked) {
// update selectedRowKeys
rowSelection?.onChange(props.dataSource.map((record) => record[rowKey]));
setSelectAll(true);
setIndeterminate(false);
} else {
// update selectedRowKeys
rowSelection?.onChange([]);
setSelectAll(false);
setIndeterminate(false);
src/components/status-tag/index.less
+5 -3
View File
@@ -12,7 +12,7 @@
overflow: hidden;
&.download {
border: 1px solid var(--ant-color-border) !important;
border: 1px solid #93ecc5 !important;
}
.download {
@@ -24,12 +24,14 @@
top: 0;
bottom: 0;
height: 100%;
background-color: rgba(0, 0, 0, 15%);
// background-color: rgba(0, 0, 0, 15%);
background-color: #e0f5ec;
}
.progress {
position: relative;
z-index: 10;
color: var(--ant-color-text);
// color: var(--ant-color-text);
color: var(--color-progress-green);
}
}
src/components/status-tag/index.tsx
+6 -2
View File
@@ -27,7 +27,11 @@ type StatusTagProps = {
const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
const { text, status } = statusValue;
const [statusColor, setStatusColor] = useState<{ text: string; bg: string }>({
const [statusColor, setStatusColor] = useState<{
text: string;
bg: string;
border?: string;
}>({
text: '',
bg: ''
});
@@ -56,7 +60,7 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
})}
style={{
color: statusColor?.text,
border: `1px solid ${statusColor?.text}`
border: `1px solid ${statusColor?.border || statusColor?.text}`
}}
>
{statusValue.message ? (
src/config/index.ts
+26 -23
View File
@@ -6,29 +6,32 @@ export const PageAction: Record<string, PageActionType> = {
VIEW: 'view'
};
export const StatusColorMap: Record<StatusType, { text: string; bg: string }> =
{
error: {
text: `var(--ant-red-6)`,
bg: `var(--ant-red-1)`
},
warning: {
text: `var(--ant-orange-6)`,
bg: `var(--ant-orange-1)`
},
transitioning: {
text: `var(--ant-blue-6)`,
bg: `var(--ant-blue-1)`
},
success: {
text: `var(--color-progress-green)`,
bg: `var(--ant-green-1)`
},
inactive: {
text: `var(--ant-color-text-secondary)`,
bg: `var(--ant-color-fill)`
}
};
export const StatusColorMap: Record<
StatusType,
{ text: string; bg: string; border?: string }
> = {
error: {
text: `var(--ant-red-6)`,
bg: `var(--ant-red-1)`
},
warning: {
text: `var(--ant-orange-6)`,
bg: `var(--ant-orange-1)`
},
transitioning: {
text: `var(--ant-blue-6)`,
bg: `var(--ant-blue-1)`
},
success: {
text: `var(--color-progress-green)`,
bg: `var(--ant-green-1)`
},
inactive: {
text: `var(--ant-color-text-tertiary)`,
border: `rgba(200,200,200,1)`,
bg: `var(--ant-color-fill)`
}
};
export const StatusMaps = {
error: 'error',
src/global.less
+7 -5
View File
@@ -50,6 +50,7 @@ html {
--ant-input-hover-border-color: #2997ff;
--box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%);
--ant-border-radius-lg: 8px;
--ant-menu-item-color: var(--color-text-1);
// --box-shadow-base: none;
.css-var-rf {
@@ -283,7 +284,6 @@ body {
.ant-pro-sider .ant-layout-sider-children {
background-color: var(--color-fill-sider);
// box-shadow: var(--box-shadow-base);
border-right: 1px solid var(--ant-color-border);
}
}
@@ -300,9 +300,7 @@ body {
.ant-table-tbody {
.ant-table-row {
border-radius: var(--table-td-radius);
// background-color: var(--color-white-1);
background-color: var(--color-fill-sider);
// box-shadow: var(--box-shadow-base);
> td {
background-color: unset;
@@ -348,6 +346,7 @@ body {
.ant-menu {
.ant-menu-item {
border-radius: var(--border-radius-small);
color: var(--color-text-1) !important;
&:active {
background-color: var(--ant-menu-item-selected-bg);
@@ -363,12 +362,12 @@ body {
}
.ant-menu-item.ant-menu-item-selected:hover {
color: var(--ant-color-primary);
color: var(--ant-color-primary) !important;
background-color: var(--ant-menu-item-selected-bg);
}
.ant-menu-item.ant-menu-item-selected {
color: var(--ant-color-primary);
color: var(--ant-color-primary) !important;
background-color: var(--ant-menu-item-selected-bg);
}
}
@@ -380,6 +379,7 @@ body {
.ant-menu-item-only-child {
height: 40px;
line-height: 40px;
color: var(--color-text-1);
.anticon {
font-size: var(--font-size-middle);
@@ -392,6 +392,7 @@ body {
.user-avatar.ant-menu-submenu {
.ant-menu-submenu-title {
padding-left: 10px;
color: var(--color-text-1) !important;
}
}
@@ -413,6 +414,7 @@ body {
display: flex;
justify-content: flex-start;
align-items: center;
color: var(--color-text-1) !important;
}
}
src/pages/dashboard/components/active-table.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ const ActiveTable = () => {
}
},
{
title: intl.formatMessage({ id: 'dashboard.runninginstances' }),
title: intl.formatMessage({ id: 'models.form.replicas' }),
dataIndex: 'instance_count',
key: 'instance_count'
},
src/pages/dashboard/config/index.ts
+2 -11
View File
@@ -2,31 +2,22 @@ export const overviewConfigs = [
{
key: 'worker_count',
label: 'dashboard.workers',
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
backgroundColor: 'var(--color-white-1)'
},
{
key: 'gpu_count',
label: 'dashboard.totalgpus',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
// {
// key: 'allocatedGpus',
// label: 'dashboard.allocategpus',
// backgroundColor: 'var(--color-white-1)'
// // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
// },
{
key: 'model_count',
label: 'dashboard.models',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
},
{
key: 'model_instance_count',
label: 'dashboard.instances',
label: 'models.form.replicas',
backgroundColor: 'var(--color-white-1)'
// backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
}
];
src/pages/llmodels/components/instance-item.tsx
+6
View File
@@ -19,11 +19,17 @@ interface InstanceItemProps {
) => void;
}
const testStatus = {
state: InstanceStatusMap.Downloading,
text: 'Downloading'
};
const InstanceItem: React.FC<InstanceItemProps> = ({
list,
handleChildSelect
}) => {
console.log('instance item====');
const intl = useIntl();
const childActionList = [
{
src/pages/login/components/styles.less
+1 -1
View File
@@ -4,7 +4,7 @@
width: max-content;
height: max-content;
padding: 32px;
background-color: rgba(255, 255, 255, 50%);
background-color: rgba(255, 255, 255, 90%);
:global(.field-wrapper) {
background-color: transparent !important;
src/pages/playground/components/chat-footer.tsx
+1
View File
@@ -26,6 +26,7 @@ interface ChatFooterProps {
}
const ChatFooter: React.FC<ChatFooterProps> = (props) => {
console.log('chat footer=====');
const platform = platformCall();
const intl = useIntl();
const {
src/pages/playground/components/ground-left.tsx
+4 -4
View File
@@ -69,12 +69,14 @@ const MessageList: React.FC<MessageProps> = (props) => {
};
const joinMessage = (chunk: any) => {
if (!chunk) {
return;
}
if (_.get(chunk, 'choices.0.finish_reason')) {
setTokenResult({
...chunk?.usage
});
return true;
return;
}
contentRef.current =
contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
@@ -86,8 +88,6 @@ const MessageList: React.FC<MessageProps> = (props) => {
uid: messageId.current
}
]);
console.log('messageList=====', messageList, messageId.current, chunk);
return false;
};
const handleStopConversation = () => {
controllerRef.current?.abort?.();
src/pages/playground/components/message-item.tsx
+20 -33
View File
@@ -3,7 +3,7 @@ import HotKeys from '@/config/hotkeys';
import { MinusCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input, Space } from 'antd';
import { memo, useEffect, useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { Roles } from '../config';
import '../style/message-item.less';
@@ -23,10 +23,7 @@ const MessageItem: React.FC<{
onDelete: () => void;
}> = ({ message, isFocus, onDelete, updateMessage, onSubmit, loading }) => {
const intl = useIntl();
const [roleType, setRoleType] = useState(message.role);
const [isTyping, setIsTyping] = useState(false);
const [messageContent, setMessageContent] = useState(message.content);
const isInitialRender = useRef(true);
const [isAnimating, setIsAnimating] = useState(false);
const [currentIsFocus, setCurrentIsFocus] = useState(isFocus);
const inputRef = useRef<any>(null);
@@ -57,29 +54,20 @@ const MessageItem: React.FC<{
// return () => clearInterval(intervalId);
// }, [message.content, isTyping]);
useEffect(() => {
setMessageContent(message.content);
}, [message.content]);
useEffect(() => {
if (!isInitialRender.current) {
updateMessage({
role: roleType,
content: messageContent,
uid: message.uid
});
} else {
isInitialRender.current = false;
}
}, [roleType, messageContent]);
const handleUpdateMessage = (params: { role: string; message: string }) => {
updateMessage({
role: params.role,
content: params.message,
uid: message.uid
});
};
const handleMessageChange = (e: any) => {
setIsTyping(true);
setMessageContent(e.target.value);
// setIsTyping(true);
handleUpdateMessage({ role: message.role, message: e.target.value });
};
const handleBlur = () => {
setIsTyping(true);
// setIsTyping(true);
setCurrentIsFocus(false);
};
@@ -88,11 +76,10 @@ const MessageItem: React.FC<{
};
const handleRoleChange = () => {
setRoleType((prevRoleType) => {
const newRoleType =
prevRoleType === Roles.User ? Roles.Assistant : Roles.User;
return newRoleType;
});
const newRoleType =
message.role === Roles.User ? Roles.Assistant : Roles.User;
handleUpdateMessage({ role: newRoleType, message: message.content });
};
const handleDelete = () => {
@@ -116,14 +103,14 @@ const MessageItem: React.FC<{
<div className="message-item">
<div className="role-type">
<Button onClick={handleRoleChange} type="text">
{intl.formatMessage({ id: `playground.${roleType}` })}
{intl.formatMessage({ id: `playground.${message.role}` })}
</Button>
</div>
<div className="message-content-input">
<Input.TextArea
ref={inputRef}
style={{ paddingBlock: '12px' }}
value={messageContent}
value={message.content}
autoSize={true}
variant="filled"
readOnly={loading}
@@ -134,8 +121,8 @@ const MessageItem: React.FC<{
</div>
<div className="delete-btn">
<Space size={5}>
{messageContent && (
<CopyButton text={messageContent} size="small"></CopyButton>
{message.content && (
<CopyButton text={message.content} size="small"></CopyButton>
)}
<Button
type="text"
@@ -151,4 +138,4 @@ const MessageItem: React.FC<{
);
};
export default memo(MessageItem);
export default MessageItem;
src/pages/playground/components/params-settings.tsx
+15 -25
View File
@@ -112,13 +112,15 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
style={{ width: INPUT_WIDTH.mini }}
>
<span className="text">
<span> {args.label}</span>
{args.description && (
<span className="m-l-5">
<Tooltip title={args.description}>
{args.description ? (
<Tooltip title={args.description}>
<span> {args.label}</span>
<span className="m-l-5">
<InfoCircleOutlined />
</Tooltip>
</span>
</span>
</Tooltip>
) : (
<span>{args.label}</span>
)}
</span>
@@ -240,26 +242,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
name="seed"
rules={[{ required: true }]}
>
<FieldWrapper
label={renderLabel({
field: 'seed',
label: 'Seed',
description: intl.formatMessage({
id: 'playground.params.seed.tips'
})
<SealInput.Number
label="Seed"
min={0}
description={intl.formatMessage({
id: 'playground.params.seed.tips'
})}
style={{ paddingInline: 0 }}
variant="borderless"
>
<Slider
defaultValue={undefined}
step={1}
tooltip={{ open: false }}
value={form.getFieldValue('seed') || undefined}
onChange={(val) => handleFieldValueChange(val, 'seed')}
style={{ marginBottom: 0, marginTop: 16 }}
></Slider>
</FieldWrapper>
style={{ width: INPUT_WIDTH.mini }}
></SealInput.Number>
</Form.Item>
<Form.Item<ParamsSettingsFormProps>
name="stop"
src/pages/profile/index.tsx
+1
View File
@@ -116,6 +116,7 @@ const Profile: React.FC = () => {
>
<SealInput.Password
required={true}
style={{ width: INPUT_WIDTH.default }}
label={intl.formatMessage({ id: 'users.password.confirm' })}
/>
</Form.Item>
src/pages/resources/components/workers.tsx
+1 -1
View File
@@ -217,7 +217,7 @@ const Resources: React.FC = () => {
return (
<StatusTag
statusValue={{
status: ['Inactive', 'unknown'].includes(record.state)
status: ['Inactive', 'Unknown'].includes(record.state)
? 'inactive'
: 'success',
text: record.state