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

refactor: playground chat

Browse Source
This commit is contained in:
jialin
2024-09-22 14:55:23 +08:00
parent 4f4f00f0c8
commit 1abaa164f5
15 changed files with 406 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-left.tsx
+25 -8
View File
@@ -19,13 +19,13 @@ import { CHAT_API } from '../apis';
import { Roles } from '../config';
import '../style/ground-left.less';
import '../style/system-message-wrap.less';
import ChatFooter from './chat-footer';
import MessageInput from './message-input';
import MessageItem from './message-item';
import ReferenceParams from './reference-params';
import ViewCodeModal from './view-code-modal';
interface MessageProps {
parameters: any;
modelList: Global.BaseOption<string>[];
ref?: any;
}
@@ -36,7 +36,7 @@ interface MessageItemProps {
}
const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
const { parameters } = props;
const { parameters, modelList } = props;
const messageId = useRef<number>(0);
const [messageList, setMessageList] = useState<MessageItemProps[]>([
{
@@ -81,11 +81,14 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
const setMessageId = () => {
messageId.current = messageId.current + 1;
};
const handleNewMessage = (role?: any) => {
messageList.push({
const handleNewMessage = (message?: { role: string; content: string }) => {
const newMessage = message || {
role:
_.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
content: '',
content: ''
};
messageList.push({
...newMessage,
uid: messageId.current + 1
});
setMessageId();
@@ -234,6 +237,10 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
setCurrentIsFocus(false);
};
const handleSelectModel = () => {};
const handlePresetPrompt = () => {};
useHotkeys(
HotKeys.SUBMIT,
() => {
@@ -324,7 +331,17 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<div className="ground-left-footer">
<ChatFooter
<MessageInput
loading={loading}
handleSubmit={handleSubmit}
addMessage={handleNewMessage}
handleAbortFetch={handleStopConversation}
clearAll={handleClear}
setModelSelections={handleSelectModel}
presetPrompt={handlePresetPrompt}
modelList={modelList}
/>
{/* <ChatFooter
onClear={handleClear}
onNewMessage={handleNewMessage}
onSubmit={handleSubmit}
@@ -334,7 +351,7 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
selectedModel={parameters.model}
hasTokenResult={!!tokenResult}
feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
></ChatFooter>
></ChatFooter> */}
</div>
<ViewCodeModal
open={show}
src/pages/playground/components/message-input.tsx
+42 -24
View File
@@ -5,7 +5,6 @@ import {
ClearOutlined,
ControlOutlined,
PictureOutlined,
SendOutlined,
SwapOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -59,10 +58,15 @@ interface MessageInputProps {
modelList: Global.BaseOption<string>[];
handleSubmit: (params: { role: string; content: string }) => void;
handleAbortFetch: () => void;
setSpans: (value: { span: number; count: number }) => void;
updateLayout?: (value: { span: number; count: number }) => void;
clearAll: () => void;
setModelSelections: (modelList: Global.BaseOption<string>[]) => void;
setModelSelections: (
modelList: (Global.BaseOption<string> & {
instanceId: symbol;
})[]
) => void;
presetPrompt: (list: { role: string; content: string }[]) => void;
addMessage: (message: { role: string; content: string }) => void;
loading: boolean;
}
@@ -74,7 +78,8 @@ const MessageInput: React.FC<MessageInputProps> = ({
loading,
modelList,
clearAll,
setSpans
updateLayout,
addMessage
}) => {
const { TextArea } = Input;
const intl = useIntl();
@@ -105,7 +110,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
};
const handleLayoutChange = (value: { span: number; count: number }) => {
console.log('layout change:', value);
setSpans(value);
updateLayout?.(value);
};
const handleToggleRole = () => {
@@ -125,7 +130,8 @@ const MessageInput: React.FC<MessageInputProps> = ({
const list = value?.map?.((val) => {
return {
value: val,
label: val
label: val,
instanceId: Symbol(val)
};
});
setModelSelections(list);
@@ -134,6 +140,16 @@ const MessageInput: React.FC<MessageInputProps> = ({
const handleOpenPrompt = () => {
setOpen(true);
};
const handleAddMessage = () => {
console.log('add message');
addMessage({ ...message });
setMessage({
...message,
content: ''
});
};
useHotkeys(
HotKeys.SUBMIT.join(','),
() => {
@@ -167,21 +183,25 @@ const MessageInput: React.FC<MessageInputProps> = ({
size="middle"
onClick={handleOpenPrompt}
></Button>
<Divider type="vertical" style={{ margin: 0 }} />
{layoutOptions.map((option) => (
<Button
key={option.icon}
type="text"
icon={<IconFont type={option.icon}></IconFont>}
size="middle"
onClick={() => handleLayoutChange(option.value)}
></Button>
))}
{updateLayout && (
<>
<Divider type="vertical" style={{ margin: 0 }} />
{layoutOptions.map((option) => (
<Button
key={option.icon}
type="text"
icon={<IconFont type={option.icon}></IconFont>}
size="middle"
onClick={() => handleLayoutChange(option.value)}
></Button>
))}
</>
)}
</div>
<div className="actions">
<Select
variant="borderless"
style={{ width: 200 }}
style={{ width: 180 }}
placeholder="select models"
options={modelList}
mode="multiple"
@@ -190,14 +210,12 @@ const MessageInput: React.FC<MessageInputProps> = ({
maxTagTextLength={15}
onChange={handleUpdateModelSelections}
></Select>
<Button type="default" size="middle" onClick={handleAddMessage}>
{intl.formatMessage({ id: 'common.button.add' })}
</Button>
{!loading ? (
<Button
style={{ width: 44 }}
type="primary"
onClick={handleSendMessage}
size="middle"
>
<SendOutlined />
<Button type="primary" onClick={handleSendMessage} size="middle">
{intl.formatMessage({ id: 'common.button.submit' })}
</Button>
) : (
<Button
src/pages/playground/components/multiple-chat/active-models.tsx
+7 -5
View File
@@ -1,5 +1,6 @@
import { Col, Row } from 'antd';
import React from 'react';
import { ModelSelectionItem } from '../../config/types';
import ModelItem from './model-item';
interface ActiveModelsProps {
@@ -7,8 +8,8 @@ interface ActiveModelsProps {
span: number;
count: number;
};
modelSelections: Global.BaseOption<string>[];
setModelRefs: (modelname: string, value: React.MutableRefObject<any>) => void;
modelSelections: ModelSelectionItem[];
setModelRefs: (modelname: symbol, value: React.MutableRefObject<any>) => void;
}
const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
@@ -16,12 +17,13 @@ const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
return (
<Row gutter={[16, 16]} style={{ height: '100%' }}>
{modelSelections.map((model, index) => (
<Col span={spans.span} key={model.value}>
<Col span={spans.span} key={`${model.value || 'empty'}-${model.uid}`}>
<ModelItem
key={model.value}
key={`${model.value || 'empty'}-${model.uid}`}
ref={(el: React.MutableRefObject<any>) =>
setModelRefs(model.value, el)
setModelRefs(model.instanceId, el)
}
instanceId={model.instanceId}
modelList={modelSelections}
model={model.value}
/>
src/pages/playground/components/multiple-chat/index.tsx
+144 -41
View File
@@ -1,22 +1,23 @@
import _ from 'lodash';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import CompareContext from '../../config/compare-context';
import { ModelSelectionItem } from '../../config/types';
import '../../style/multiple-chat.less';
import MessageInput from '../message-input';
import ActiveModels from './active-models';
interface MultiCompareProps {
modelList: Global.BaseOption<string>[];
modelList: (Global.BaseOption<string> & { type?: string })[];
spans?: number;
}
const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
const [loadingStatus, setLoadingStatus] = useState<Record<string, boolean>>(
const [loadingStatus, setLoadingStatus] = useState<Record<symbol, boolean>>(
{}
);
const [modelSelections, setModelSelections] = useState<
Global.BaseOption<string>[]
>([]);
const [modelSelections, setModelSelections] = useState<ModelSelectionItem[]>(
[]
);
const [globalParams, setGlobalParams] = useState<Record<string, any>>({
seed: null,
stop: null,
@@ -31,69 +32,89 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
span: 12,
count: 2
});
const cacheModelInstanceList = useRef<any[]>([]);
const modelsCounterMap = useRef<Record<string, number>>({});
const modelRefs = useRef<any>({});
const boxHeight = 'calc(100vh - 72px)';
const isLoading = useMemo(() => {
console.log('loadingStatus========2', loadingStatus);
return _.keys(loadingStatus).some(
(modelname: string) => loadingStatus[modelname]
);
const modelRefList = Object.getOwnPropertySymbols(loadingStatus);
return modelRefList.some((instanceId: symbol) => loadingStatus[instanceId]);
}, [loadingStatus]);
useEffect(() => {
const list = modelList.slice?.(0, spans.count);
setModelSelections(list);
}, [modelList, spans.count]);
useEffect(() => {
modelRefs.current = {};
modelSelections.forEach((item) => {
modelRefs.current[item.value] = null;
const modelFullList = useMemo(() => {
return modelList.map((item) => {
return {
...item,
disabled: modelSelections.some((model) => model.value === item.value)
};
});
}, [modelSelections]);
}, [modelList, modelSelections]);
const setModelCounter = (model: string) => {
modelsCounterMap.current[model] = _.add(modelsCounterMap.current[model], 1);
return modelsCounterMap.current[model];
};
const pruneInstanceSymbol = (instanceId: symbol) => {
modelRefs.current[instanceId] = null;
loadingStatus[instanceId] = false;
};
const handleSubmit = (currentMessage: { role: string; content: string }) => {
const modelRefList = _.keys(modelRefs.current);
modelRefList.forEach(async (modelname: any, index: number) => {
const ref = modelRefs.current[modelname];
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach((instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.submit(currentMessage);
});
};
const handleAddMessage = (message: { role: string; content: string }) => {
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach((instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.setMessageList((preList: any) => {
return [...preList, { ...message }];
});
});
};
const handleAbortFetch = () => {
_.keys(modelRefs.current).forEach((modelname: string) => {
const ref = modelRefs.current[modelname];
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach((instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.abortFetch();
});
};
const setModelRefs = useCallback(
(modelname: string, el: React.MutableRefObject<any>) => {
modelRefs.current[modelname] = el;
(instanceId: symbol, el: React.MutableRefObject<any>) => {
modelRefs.current[instanceId] = el;
},
[]
);
const handleSetLoadingStatus = (modeName: string, status: boolean) => {
const handleSetLoadingStatus = (instanceId: symbol, status: boolean) => {
setLoadingStatus((preStatus) => {
const newState = { ...preStatus };
newState[modeName] = status;
newState[instanceId] = status;
return newState;
});
};
const handleClearAll = () => {
_.keys(modelRefs.current).forEach((modelname: string) => {
const ref = modelRefs.current[modelname];
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach((instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.clear();
});
};
const handleDeleteModel = (modelname: string) => {
const handleDeleteModel = (instanceId: symbol) => {
const newModelList = modelSelections.filter(
(model) => model.value !== modelname
(model) => model.instanceId !== instanceId
);
pruneInstanceSymbol(instanceId);
const span = Math.floor(24 / (24 / spans.span - 1));
setSpans({
span,
@@ -102,27 +123,108 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
setModelSelections(newModelList);
};
const handleUpdateModelSelections = (list: Global.BaseOption<string>[]) => {
// set spans.span
const span = Math.floor(24 / list.length);
const handleUpdateModelSelections = (
list: (Global.BaseOption<string> & { instanceId: symbol })[]
) => {
const newList = list.map((item) => {
return {
...item,
uid: setModelCounter(item.value),
instanceId: Symbol(item.value)
};
});
const updateList = _.concat(modelSelections, newList);
const span = Math.floor(24 / updateList.length);
setSpans({
span: span < 8 ? 8 : span,
count: spans.count
});
setModelSelections(list);
setModelSelections(updateList);
};
const handlePresetPrompt = (list: { role: string; content: string }[]) => {
const sysMsg = list.filter((item) => item.role === 'system');
const userMsg = list.filter((item) => item.role === 'user');
const modelRefList = _.keys(modelRefs.current);
modelRefList.forEach(async (modelname: any) => {
const ref = modelRefs.current[modelname];
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach(async (instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.presetPrompt(userMsg);
ref?.setSystemMessage(_.get(sysMsg, '0.content', ''));
});
};
const handleUpdateModelList = (spans: { span: number; count: number }) => {
const list = modelSelections;
// less than count
if (list.length < spans.count) {
const restCount = spans.count - list.length;
const restList = _.slice(modelList, list.length, list.length + restCount);
const resultList = Array.from(
{ length: restCount - restList.length },
(_, index) => {
return {
label: '',
value: '',
type: 'empty'
};
}
);
const newResultList = _.concat(restList, resultList).map((item: any) => {
return {
...item,
uid: setModelCounter(item.value || 'empty'),
instanceId:
item.type === 'empty' ? Symbol('empty') : Symbol(item.value)
};
});
setModelSelections(_.concat(list, newResultList));
return;
}
// more than count
if (list.length > spans.count) {
const newList = list.slice(0, spans.count);
setModelSelections(newList);
return;
}
};
const updateLayout = (value: { span: number; count: number }) => {
setSpans(value);
handleUpdateModelList(value);
};
useEffect(() => {
modelRefs.current = {};
let list = _.take(modelList, spans.count);
if (list.length < spans.count && list.length > 0) {
const restCount = spans.count - list.length;
const restList = Array.from({ length: restCount }, (_, index) => {
return {
label: '',
value: '',
type: 'empty'
};
});
list = _.concat(list, restList);
}
const resultList = list.map((item: any) => {
return {
...item,
uid: setModelCounter(item.value || 'empty'),
instanceId: item.type === 'empty' ? Symbol('empty') : Symbol(item.value)
};
});
setModelSelections(resultList);
}, [modelList]);
// useEffect(() => {
// modelRefs.current = {};
// modelSelections.forEach((item) => {
// modelRefs.current[item.instanceId] = null;
// });
// }, [modelSelections]);
return (
<div className="multiple-chat" style={{ height: boxHeight }}>
<div className="chat-list">
@@ -147,12 +249,13 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
<MessageInput
loading={isLoading}
handleSubmit={handleSubmit}
addMessage={handleAddMessage}
handleAbortFetch={handleAbortFetch}
clearAll={handleClearAll}
setSpans={setSpans}
updateLayout={updateLayout}
setModelSelections={handleUpdateModelSelections}
presetPrompt={handlePresetPrompt}
modelList={modelList}
modelList={modelFullList}
/>
</div>
</div>
src/pages/playground/components/multiple-chat/model-item.tsx
+81 -26
View File
@@ -23,6 +23,7 @@ import React, {
useContext,
useEffect,
useImperativeHandle,
useMemo,
useRef,
useState
} from 'react';
@@ -30,6 +31,7 @@ import 'simplebar-react/dist/simplebar.min.css';
import { CHAT_API } from '../../apis';
import { Roles } from '../../config';
import CompareContext from '../../config/compare-context';
import { ModelSelectionItem } from '../../config/types';
import '../../style/model-item.less';
import ParamsSettings from '../params-settings';
import ReferenceParams from '../reference-params';
@@ -38,7 +40,8 @@ import MessageContent from './message-content';
interface ModelItemProps {
model: string;
modelList: Global.BaseOption<string>[];
modelList: ModelSelectionItem[];
instanceId: symbol;
ref: any;
}
@@ -49,7 +52,7 @@ interface MessageItemProps {
}
const ModelItem: React.FC<ModelItemProps> = forwardRef(
({ model, modelList }, ref) => {
({ model, modelList, instanceId }, ref) => {
const {
spans,
globalParams,
@@ -63,7 +66,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const [autoSize, setAutoSize] = useState<{
minRows: number;
maxRows: number;
}>({ minRows: 1, maxRows: 1 });
focus: boolean;
}>({ minRows: 1, maxRows: 1, focus: false });
const [systemMessage, setSystemMessage] = useState<string>('');
const [params, setParams] = useState<Record<string, any>>({});
const [loading, setLoading] = useState(false);
@@ -74,6 +78,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const contentRef = useRef<any>('');
const controllerRef = useRef<any>(null);
const currentMessageRef = useRef<MessageItemProps>({} as MessageItemProps);
const systemMessageRef = useRef<any>(null);
const setMessageId = () => {
messageId.current = messageId.current + 1;
@@ -81,7 +86,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const abortFetch = () => {
controllerRef.current?.abort?.();
setLoadingStatus(params.model, false);
setLoadingStatus(instanceId, false);
};
const joinMessage = (chunk: any) => {
@@ -118,7 +123,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const { parameters, currentMessage } = currentParams;
if (!parameters.model) return;
try {
setLoadingStatus(parameters.model, true);
setLoadingStatus(instanceId, true);
setMessageId();
controllerRef.current?.abort?.();
@@ -179,16 +184,15 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
await readStreamData(reader, decoder, (chunk: any) => {
joinMessage(chunk);
});
setLoadingStatus(params.model, false);
setLoadingStatus(instanceId, false);
} catch (error) {
console.log('error=====', error);
setLoadingStatus(params.model, false);
setLoadingStatus(instanceId, false);
}
};
const handleDropdownAction = useCallback(({ key }: { key: string }) => {
console.log('key:', key);
if (key === 'clear') {
setMessageList([]);
setSystemMessage('');
}
if (key === 'viewCode') {
setShow(true);
@@ -239,7 +243,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setTokenResult(null);
setSystemMessage('');
currentMessageRef.current = {} as MessageItemProps;
console.log('clear message', systemMessage);
};
const handleCloseViewCode = () => {
setShow(false);
};
@@ -270,23 +276,40 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
};
const handleDelete = () => {
handleDeleteModel(params.model);
handleDeleteModel(instanceId);
};
const handleFocus = () => {
setAutoSize({
minRows: 4,
maxRows: 4
maxRows: 4,
focus: true
});
setTimeout(() => {
systemMessageRef.current?.focus?.({
cursor: 'end'
});
}, 100);
};
const handleBlur = () => {
setAutoSize({
minRows: 1,
maxRows: 1
maxRows: 1,
focus: false
});
};
const handleClearSystemMessage = () => {
setSystemMessage('');
};
const modelOptions = useMemo(() => {
return modelList.filter((item) => {
return item.type !== 'empty';
});
}, [modelList]);
useEffect(() => {
console.log('globalParams:', globalParams.model, globalParams);
setParams({
@@ -319,8 +342,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
<div className="header">
<span className="title">
<Select
style={{ minWidth: '100px' }}
variant="borderless"
options={modelList}
options={modelOptions}
onChange={handleModelChange}
value={params.model}
></Select>
@@ -390,19 +414,50 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
></Button>
</span>
</div>
<div>
<Input.TextArea
variant="filled"
placeholder="Type system message here"
style={{ borderRadius: '0', border: 'none' }}
value={systemMessage}
autoSize={autoSize}
onFocus={handleFocus}
onBlur={handleBlur}
allowClear={false}
onChange={(e) => setSystemMessage(e.target.value)}
></Input.TextArea>
<Divider style={{ margin: '0' }}></Divider>
<div className="sys-message">
{
<div style={{ display: autoSize.focus ? 'block' : 'none' }}>
<Input.TextArea
ref={systemMessageRef}
variant="filled"
placeholder="Type system message here"
style={{
borderRadius: '0',
border: 'none'
}}
value={systemMessage}
autoSize={{
minRows: autoSize.minRows,
maxRows: autoSize.maxRows
}}
onFocus={handleFocus}
onBlur={handleBlur}
allowClear={false}
onChange={(e) => setSystemMessage(e.target.value)}
></Input.TextArea>
<Divider style={{ margin: '0' }}></Divider>
</div>
}
{!autoSize.focus && (
<div className="sys-content-wrap" onClick={handleFocus}>
<div className="sys-content">
{systemMessage || (
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
Type system message here
</span>
)}
</div>
{systemMessage && (
<Button
className="clear-btn"
type="text"
icon={<CloseOutlined />}
size="small"
onClick={handleClearSystemMessage}
></Button>
)}
</div>
)}
</div>
<div className="content">
<MessageContent
src/pages/playground/components/prompt-modal.tsx
+47 -36
View File
@@ -1,6 +1,8 @@
import { useIntl } from '@umijs/max';
import { Button, Modal, Typography } from 'antd';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import promptList from '../config/prompt';
import '../style/prompt-modal.less';
@@ -33,46 +35,55 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
keyboard={false}
width={660}
styles={{
body: {
maxHeight: '550px',
overflow: 'auto'
content: {
padding: '0'
},
header: {
padding: 'var(--ant-modal-content-padding)',
marginBottom: '0'
}
}}
footer={null}
>
<div className="prompt-wrapper">
{promptList.map((item, index) => {
return (
<div key={index} className="prompt-item">
<h3 className="title">
<span className="text">{item.title}</span>
<Button
size="middle"
type="default"
onClick={() => handleSelect(item)}
>
Use
</Button>
</h3>
{item.data.map((data, i) => {
return (
<div key={i} className="data-item">
<span className="role">{data.role}</span>
<span className="prompt">
<Typography.Paragraph
style={{ margin: 0 }}
ellipsis={{ rows: 2, expandable: true, symbol: 'more' }}
>
{data.content}
</Typography.Paragraph>
</span>
</div>
);
})}
</div>
);
})}
</div>
<SimpleBar style={{ maxHeight: '550px' }}>
<div className="prompt-wrapper">
{promptList.map((item, index) => {
return (
<div key={index} className="prompt-item">
<h3 className="title">
<span className="text">{item.title}</span>
<Button
size="middle"
type="default"
onClick={() => handleSelect(item)}
>
Use
</Button>
</h3>
{item.data.map((data, i) => {
return (
<div key={i} className="data-item">
<span className="role">{data.role}</span>
<span className="prompt">
<Typography.Paragraph
style={{ margin: 0 }}
ellipsis={{
rows: 2,
expandable: true,
symbol: 'more'
}}
>
{data.content}
</Typography.Paragraph>
</span>
</div>
);
})}
</div>
);
})}
</div>
</SimpleBar>
</Modal>
);
};
src/pages/playground/config/compare-context.ts
+2 -2
View File
@@ -8,10 +8,10 @@ interface CompareContextProps {
systemMessage?: string;
globalParams: Record<string, any>;
loadingStatus: Record<string, boolean>;
handleDeleteModel: (modelname: string) => void;
handleDeleteModel: (instanceId: symbol) => void;
setSystemMessage?: (message: string) => void;
setGlobalParams: (value: Record<string, any>) => void;
setLoadingStatus: (modeName: string, status: boolean) => void;
setLoadingStatus: (instanceId: symbol, status: boolean) => void;
}
const CompareContext = React.createContext<CompareContextProps>(
{} as CompareContextProps
src/pages/playground/config/types.ts
+5
View File
@@ -0,0 +1,5 @@
export interface ModelSelectionItem extends Global.BaseOption<string> {
uid: number;
instanceId: symbol;
type?: string;
}
src/pages/playground/index.tsx
+6 -9
View File
@@ -3,7 +3,7 @@ import HotKeys from '@/config/hotkeys';
import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Divider, Segmented, Space, Tabs, TabsProps } from 'antd';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
@@ -45,7 +45,11 @@ const Playground: React.FC = () => {
key: 'chat',
label: 'Chat',
children: (
<GroundLeft parameters={params} ref={groundLeftRef}></GroundLeft>
<GroundLeft
parameters={params}
ref={groundLeftRef}
modelList={modelList}
></GroundLeft>
)
},
{
@@ -146,13 +150,6 @@ const Playground: React.FC = () => {
collapse: collapse
})}
>
<div
className={classNames('divider-line', {
collapse: collapse
})}
>
<Divider type="vertical" />
</div>
<div className={classNames('params')}>
<div
className={classNames('params-box', {
src/pages/playground/style/chat-footer.less
+2 -2
View File
@@ -1,6 +1,6 @@
.chat-footer {
display: flex;
align-items: center;
// display: flex;
// align-items: center;
padding-block: 10px;
padding-right: 32px;
}
src/pages/playground/style/ground-left.less
+2 -2
View File
@@ -3,11 +3,11 @@
justify-content: space-between;
flex-direction: column;
position: relative;
height: calc(100vh - 136px);
height: calc(100vh - 72px);
.message-list-wrap {
max-height: calc(100vh - 152px);
overflow-y: auto;
padding-right: 32px;
padding-inline: var(--layout-content-inlinepadding);
}
}
src/pages/playground/style/message-input.less
+1 -16
View File
@@ -33,25 +33,10 @@
.actions {
display: flex;
align-items: center;
gap: 5px;
gap: 10px;
}
}
&:focus-within {
// border-color: var(--ant-input-active-border-color);
// box-shadow: var(--ant-input-active-shadow);
// background-color: var(--color-white-1);
// transition: all 0.2s ease;
// &:hover {
// background-color: var(--color-white-1);
// }
}
&:hover {
// background: var(--ant-color-fill-secondary);
// transition: background 0.2s ease;
}
textarea {
padding-inline: 6px 0;
padding-block: 0;
src/pages/playground/style/model-item.less
+36
View File
@@ -14,6 +14,42 @@
border-bottom: 1px solid var(--ant-color-border);
}
.sys-message {
position: relative;
}
.sys-content-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--ant-color-fill-tertiary);
padding-right: 20px;
cursor: pointer;
&:hover {
.clear-btn {
display: block;
}
}
}
.clear-btn {
display: none;
position: absolute;
right: 6px;
top: 6px;
}
.sys-content {
height: 36px;
line-height: 20px;
padding: 8px 14px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content {
flex: 1;
padding: 16px;
src/pages/playground/style/play-ground.less
+4 -2
View File
@@ -36,7 +36,7 @@
.params {
overflow: hidden;
height: calc(100vh - 136px);
height: calc(100vh - 72px);
.collapse {
width: 0;
@@ -50,6 +50,7 @@
width: 390px;
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid var(--ant-color-split);
&.collapse {
padding-inline: 0;
@@ -73,7 +74,8 @@
.playground-container {
.ant-pro-page-container-children-container {
padding-right: 0;
padding-inline: 0;
padding-block: 0;
}
&.compare {
src/pages/playground/style/prompt-modal.less
+2
View File
@@ -2,6 +2,7 @@
display: flex;
flex-direction: column;
gap: 16px;
padding: var(--ant-modal-content-padding);
.title {
display: flex;
@@ -10,6 +11,7 @@
.text {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
}
}