feat: add models compare
This commit is contained in:
jialin
@@ -0,0 +1,34 @@
|
||||
import { Col, Row } from 'antd';
|
||||
import React from 'react';
|
||||
import ModelItem from './model-item';
|
||||
|
||||
interface ActiveModelsProps {
|
||||
spans: {
|
||||
span: number;
|
||||
count: number;
|
||||
};
|
||||
modelSelections: Global.BaseOption<string>[];
|
||||
setModelRefs: (modelname: string, value: React.MutableRefObject<any>) => void;
|
||||
}
|
||||
|
||||
const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
|
||||
const { spans, modelSelections, setModelRefs } = props;
|
||||
return (
|
||||
<Row gutter={[16, 16]} style={{ height: '100%' }}>
|
||||
{modelSelections.map((model, index) => (
|
||||
<Col span={spans.span} key={model.value}>
|
||||
<ModelItem
|
||||
key={model.value}
|
||||
ref={(el: React.MutableRefObject<any>) =>
|
||||
setModelRefs(model.value, el)
|
||||
}
|
||||
modelList={modelSelections}
|
||||
model={model.value}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ActiveModels);
|
||||
@@ -1,5 +1,9 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import React from 'react';
|
||||
import { Roles } from '../../config';
|
||||
import '../../style/content-item.less';
|
||||
|
||||
const ContentItem: React.FC<{ data: { role: string; content: string } }> = ({
|
||||
data
|
||||
@@ -8,7 +12,13 @@ const ContentItem: React.FC<{ data: { role: string; content: string } }> = ({
|
||||
return (
|
||||
<div className="content-item">
|
||||
<div className="content-item-role">
|
||||
{' '}
|
||||
<span className="m-r-5">
|
||||
{Roles.User === data.role ? (
|
||||
<UserOutlined></UserOutlined>
|
||||
) : (
|
||||
<IconFont type="icon-AIzhineng"></IconFont>
|
||||
)}
|
||||
</span>
|
||||
{intl.formatMessage({ id: `playground.${data.role}` })}
|
||||
</div>
|
||||
<div className="content-item-content">{data.content}</div>
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
import { Col, Row } from 'antd';
|
||||
import { memo, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import CompareContext from '../../config/compare-context';
|
||||
import '../../style/multiple-chat.less';
|
||||
import MessageInput from '../message-input';
|
||||
import ModelItem from './model-item';
|
||||
import ActiveModels from './active-models';
|
||||
|
||||
interface MultiCompareProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
parmasSettings?: Record<string, any>;
|
||||
spans?: number;
|
||||
}
|
||||
|
||||
const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
|
||||
const [loadingStatus, setLoadingStatus] = useState<boolean[]>([]);
|
||||
const [parmasSettings, setParamsSettings] = useState<Record<string, any>>({});
|
||||
const [systemMessage, setSystemMessage] = useState<string>('');
|
||||
const [currentMessage, setCurrentMessage] = useState<
|
||||
{
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
}[]
|
||||
const [loadingStatus, setLoadingStatus] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const [modelSelections, setModelSelections] = useState<
|
||||
Global.BaseOption<string>[]
|
||||
>([]);
|
||||
const [globalParams, setGlobalParams] = useState<Record<string, any>>({
|
||||
seed: null,
|
||||
@@ -34,88 +31,127 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
|
||||
span: 12,
|
||||
count: 2
|
||||
});
|
||||
const modelRefs = useRef<any[]>([]);
|
||||
const modelRefs = useRef<any>({});
|
||||
const boxHeight = 'calc(100vh - 72px)';
|
||||
|
||||
const isLoading = useMemo(() => {
|
||||
return loadingStatus.some((status) => status);
|
||||
console.log('loadingStatus========2', loadingStatus);
|
||||
return _.keys(loadingStatus).some(
|
||||
(modelname: string) => loadingStatus[modelname]
|
||||
);
|
||||
}, [loadingStatus]);
|
||||
|
||||
const modelSelections = useMemo(() => {
|
||||
useEffect(() => {
|
||||
const list = modelList.slice?.(0, spans.count);
|
||||
return list;
|
||||
setModelSelections(list);
|
||||
}, [modelList, spans.count]);
|
||||
|
||||
useEffect(() => {
|
||||
modelRefs.current = modelSelections.map(() => {
|
||||
return {};
|
||||
modelRefs.current = {};
|
||||
modelSelections.forEach((item) => {
|
||||
modelRefs.current[item.value] = null;
|
||||
});
|
||||
}, [modelSelections]);
|
||||
|
||||
const handleSubmit = (message: string) => {
|
||||
let msg: any[] = [];
|
||||
if (message) {
|
||||
msg = [
|
||||
{
|
||||
role: 'user',
|
||||
content: message
|
||||
}
|
||||
];
|
||||
}
|
||||
modelRefs.current.forEach(async (ref, index) => {
|
||||
ref?.setMessageList((preList: any) => {
|
||||
return [...preList, ...msg];
|
||||
});
|
||||
setLoadingStatus((preStatus) => {
|
||||
const newState = [...preStatus];
|
||||
newState[index] = true;
|
||||
return newState;
|
||||
});
|
||||
await ref?.submit();
|
||||
setLoadingStatus((preStatus) => {
|
||||
const newState = [...preStatus];
|
||||
newState[index] = false;
|
||||
return newState;
|
||||
});
|
||||
const handleSubmit = (currentMessage: { role: string; content: string }) => {
|
||||
const modelRefList = _.keys(modelRefs.current);
|
||||
modelRefList.forEach(async (modelname: any, index: number) => {
|
||||
const ref = modelRefs.current[modelname];
|
||||
ref?.submit(currentMessage);
|
||||
});
|
||||
};
|
||||
|
||||
const handleAbortFetch = () => {
|
||||
modelRefs.current.forEach((ref) => {
|
||||
_.keys(modelRefs.current).forEach((modelname: string) => {
|
||||
const ref = modelRefs.current[modelname];
|
||||
ref?.abortFetch();
|
||||
});
|
||||
};
|
||||
|
||||
const setModelRefs = (index: number, ref: any) => {
|
||||
modelRefs.current[index] = ref;
|
||||
const setModelRefs = useCallback(
|
||||
(modelname: string, el: React.MutableRefObject<any>) => {
|
||||
modelRefs.current[modelname] = el;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSetLoadingStatus = (modeName: string, status: boolean) => {
|
||||
setLoadingStatus((preStatus) => {
|
||||
const newState = { ...preStatus };
|
||||
newState[modeName] = status;
|
||||
return newState;
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
_.keys(modelRefs.current).forEach((modelname: string) => {
|
||||
const ref = modelRefs.current[modelname];
|
||||
ref?.clear();
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteModel = (modelname: string) => {
|
||||
const newModelList = modelSelections.filter(
|
||||
(model) => model.value !== modelname
|
||||
);
|
||||
const span = Math.floor(24 / (24 / spans.span - 1));
|
||||
setSpans({
|
||||
span,
|
||||
count: spans.count
|
||||
});
|
||||
setModelSelections(newModelList);
|
||||
};
|
||||
|
||||
const handleUpdateModelSelections = (list: Global.BaseOption<string>[]) => {
|
||||
// set spans.span
|
||||
const span = Math.floor(24 / list.length);
|
||||
setSpans({
|
||||
span: span < 8 ? 8 : span,
|
||||
count: spans.count
|
||||
});
|
||||
setModelSelections(list);
|
||||
};
|
||||
|
||||
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];
|
||||
ref?.presetPrompt(userMsg);
|
||||
ref?.setSystemMessage(_.get(sysMsg, '0.content', ''));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="multiple-chat">
|
||||
<div className="multiple-chat" style={{ height: boxHeight }}>
|
||||
<div className="chat-list">
|
||||
<Row gutter={[16, 16]} style={{ height: '100%' }}>
|
||||
{modelSelections.map((model, index) => (
|
||||
<Col span={spans.span} key={model.value}>
|
||||
<ModelItem
|
||||
ref={(el: any) => setModelRefs(index, el)}
|
||||
modelList={modelSelections}
|
||||
globalParams={{
|
||||
...globalParams,
|
||||
model: model.value
|
||||
}}
|
||||
systemMessage={systemMessage}
|
||||
setGlobalParams={setGlobalParams}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
<CompareContext.Provider
|
||||
value={{
|
||||
spans,
|
||||
globalParams,
|
||||
loadingStatus,
|
||||
setGlobalParams,
|
||||
setLoadingStatus: handleSetLoadingStatus,
|
||||
handleDeleteModel: handleDeleteModel
|
||||
}}
|
||||
>
|
||||
<ActiveModels
|
||||
spans={spans}
|
||||
modelSelections={modelSelections}
|
||||
setModelRefs={setModelRefs}
|
||||
></ActiveModels>
|
||||
</CompareContext.Provider>
|
||||
</div>
|
||||
<div>
|
||||
<MessageInput
|
||||
loading={isLoading}
|
||||
handleSubmit={handleSubmit}
|
||||
handleAbortFetch={handleAbortFetch}
|
||||
setParamsSettings={setParamsSettings}
|
||||
clearAll={handleClearAll}
|
||||
setSpans={setSpans}
|
||||
setModelSelections={handleUpdateModelSelections}
|
||||
presetPrompt={handlePresetPrompt}
|
||||
modelList={modelList}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,49 @@
|
||||
import React from 'react';
|
||||
import { Spin } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import SimpleBar from 'simplebar-react';
|
||||
import 'simplebar-react/dist/simplebar.min.css';
|
||||
import ContentItem from './content-item';
|
||||
|
||||
interface MessageContentProps {
|
||||
loading: boolean;
|
||||
spans: {
|
||||
span: number;
|
||||
count: number;
|
||||
};
|
||||
messageList: {
|
||||
role: string;
|
||||
uid?: string;
|
||||
uid?: any;
|
||||
content: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const MessageContent: React.FC<MessageContentProps> = ({ messageList }) => {
|
||||
const MessageContent: React.FC<MessageContentProps> = ({
|
||||
messageList,
|
||||
spans,
|
||||
loading
|
||||
}) => {
|
||||
const maxHeight = useMemo(() => {
|
||||
const total = 72 + 110 + 46 + 16 + 32;
|
||||
if (spans.span < 4) {
|
||||
return `calc(100vh - ${total}px)`;
|
||||
}
|
||||
return `calc(100vh - ${total * 2 + 16}px)`;
|
||||
}, [spans.span]);
|
||||
return (
|
||||
<div>
|
||||
{messageList.map((item, index) => (
|
||||
<ContentItem key={index} data={item} />
|
||||
))}
|
||||
</div>
|
||||
<>
|
||||
{messageList.length ? (
|
||||
<SimpleBar style={{ maxHeight: 'calc(100% - 46px)' }}>
|
||||
<div className="message-content-list">
|
||||
{messageList.map((item, index) => (
|
||||
<ContentItem key={index} data={item} />
|
||||
))}
|
||||
</div>
|
||||
</SimpleBar>
|
||||
) : (
|
||||
<span>{loading}</span>
|
||||
)}
|
||||
<Spin spinning={!!loading} size="small" style={{ width: '100%' }} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
|
||||
import {
|
||||
ClearOutlined,
|
||||
CloseOutlined,
|
||||
@@ -6,71 +7,200 @@ import {
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Checkbox, Dropdown, Popover, Select } from 'antd';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Input,
|
||||
Popover,
|
||||
Select
|
||||
} from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import SimpleBar from 'simplebar-react';
|
||||
import 'simplebar-react/dist/simplebar.min.css';
|
||||
import useChatCompletion from '../../hooks/use-chat-completion';
|
||||
import { CHAT_API } from '../../apis';
|
||||
import { Roles } from '../../config';
|
||||
import CompareContext from '../../config/compare-context';
|
||||
import '../../style/model-item.less';
|
||||
import ParamsSettings from '../params-settings';
|
||||
import ReferenceParams from '../reference-params';
|
||||
import ViewCodeModal from '../view-code-modal';
|
||||
import MessageContent from './message-content';
|
||||
|
||||
interface ModelItemProps {
|
||||
model?: string;
|
||||
globalParams: Record<string, any>;
|
||||
setGlobalParams: (value: Record<string, any>) => void;
|
||||
model: string;
|
||||
modelList: Global.BaseOption<string>[];
|
||||
systemMessage: string;
|
||||
ref: any;
|
||||
}
|
||||
|
||||
interface MessageItemProps {
|
||||
role: string;
|
||||
content: string;
|
||||
uid: string | number;
|
||||
}
|
||||
|
||||
const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
({ model, systemMessage, modelList, globalParams, setGlobalParams }, ref) => {
|
||||
({ model, modelList }, ref) => {
|
||||
const {
|
||||
spans,
|
||||
globalParams,
|
||||
setGlobalParams,
|
||||
setLoadingStatus,
|
||||
handleDeleteModel,
|
||||
loadingStatus
|
||||
} = useContext(CompareContext);
|
||||
const intl = useIntl();
|
||||
const isApplyToAllModels = useRef(false);
|
||||
const [autoSize, setAutoSize] = useState<{
|
||||
minRows: number;
|
||||
maxRows: number;
|
||||
}>({ minRows: 1, maxRows: 1 });
|
||||
const [systemMessage, setSystemMessage] = useState<string>('');
|
||||
const [params, setParams] = useState<Record<string, any>>({});
|
||||
// const [messageList, setMessageList] = useState<
|
||||
// {
|
||||
// role: 'user' | 'assistant';
|
||||
// content: string;
|
||||
// }[]
|
||||
// >([]);
|
||||
const { messageList, submitMessage, abortFetch, setMessageList, loading } =
|
||||
useChatCompletion(systemMessage, params);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const messageId = useRef<number>(0);
|
||||
const [messageList, setMessageList] = useState<MessageItemProps[]>([]);
|
||||
const [tokenResult, setTokenResult] = useState<any>(null);
|
||||
const [show, setShow] = useState(false);
|
||||
const contentRef = useRef<any>('');
|
||||
const controllerRef = useRef<any>(null);
|
||||
const currentMessageRef = useRef<MessageItemProps>({} as MessageItemProps);
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
submit: submitMessage,
|
||||
abortFetch,
|
||||
setMessageList,
|
||||
loading
|
||||
};
|
||||
});
|
||||
const setMessageId = () => {
|
||||
messageId.current = messageId.current + 1;
|
||||
};
|
||||
|
||||
const actions = [
|
||||
{
|
||||
label: intl.formatMessage({ id: 'common.button.clear' }),
|
||||
key: 'clear',
|
||||
icon: <ClearOutlined />
|
||||
},
|
||||
{
|
||||
label: intl.formatMessage({ id: 'playground.viewcode' }),
|
||||
key: 'viewcode',
|
||||
icon: <IconFont type="icon-code" />
|
||||
const abortFetch = () => {
|
||||
controllerRef.current?.abort?.();
|
||||
setLoadingStatus(params.model, false);
|
||||
};
|
||||
|
||||
const joinMessage = (chunk: any) => {
|
||||
if (!chunk) {
|
||||
return;
|
||||
}
|
||||
];
|
||||
if (_.get(chunk, 'choices.0.finish_reason')) {
|
||||
setTokenResult({
|
||||
...chunk?.usage
|
||||
});
|
||||
return;
|
||||
}
|
||||
contentRef.current =
|
||||
contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
|
||||
console.log('currentMessage==========5', messageList);
|
||||
setMessageList([
|
||||
...messageList,
|
||||
{
|
||||
...currentMessageRef.current
|
||||
},
|
||||
{
|
||||
role: Roles.Assistant,
|
||||
content: contentRef.current,
|
||||
uid: messageId.current
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
const handleModelChange = (value: string) => {
|
||||
setParams({
|
||||
...params,
|
||||
model: value
|
||||
});
|
||||
const submitMessage = async (currentParams: {
|
||||
parameters: Record<string, any>;
|
||||
currentMessage: { role: string; content: string };
|
||||
}) => {
|
||||
console.log('currentMessage==========3', currentParams);
|
||||
const { parameters, currentMessage } = currentParams;
|
||||
if (!parameters.model) return;
|
||||
try {
|
||||
setLoadingStatus(parameters.model, true);
|
||||
setMessageId();
|
||||
|
||||
controllerRef.current?.abort?.();
|
||||
controllerRef.current = new AbortController();
|
||||
const signal = controllerRef.current.signal;
|
||||
currentMessageRef.current = {
|
||||
...currentMessage,
|
||||
uid: messageId.current
|
||||
};
|
||||
setMessageList((preList) => {
|
||||
return [
|
||||
...preList,
|
||||
{
|
||||
...currentMessageRef.current
|
||||
}
|
||||
];
|
||||
});
|
||||
console.log('currentMessage==========4', messageList);
|
||||
const messages = _.map(
|
||||
[
|
||||
...messageList,
|
||||
{
|
||||
...currentMessageRef.current
|
||||
}
|
||||
],
|
||||
(item: MessageItemProps) => {
|
||||
return {
|
||||
role: item.role,
|
||||
content: item.content
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
contentRef.current = '';
|
||||
const chatParams = {
|
||||
messages: systemMessage
|
||||
? [
|
||||
{
|
||||
role: Roles.System,
|
||||
content: systemMessage
|
||||
},
|
||||
...messages
|
||||
]
|
||||
: [...messages],
|
||||
...parameters,
|
||||
stream: true
|
||||
};
|
||||
const result = await fetchChunkedData({
|
||||
data: chatParams,
|
||||
url: CHAT_API,
|
||||
signal
|
||||
});
|
||||
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
const { reader, decoder } = result;
|
||||
await readStreamData(reader, decoder, (chunk: any) => {
|
||||
joinMessage(chunk);
|
||||
});
|
||||
setLoadingStatus(params.model, false);
|
||||
} catch (error) {
|
||||
console.log('error=====', error);
|
||||
setLoadingStatus(params.model, false);
|
||||
}
|
||||
};
|
||||
const handleDropdownAction = useCallback(({ key }: { key: string }) => {
|
||||
console.log('key:', key);
|
||||
if (key === 'clear') {
|
||||
setMessageList([]);
|
||||
}
|
||||
if (key === 'viewCode') {
|
||||
setShow(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (currentMessage: {
|
||||
role: string;
|
||||
content: string;
|
||||
}) => {
|
||||
console.log('currentMessage==========2', currentMessage);
|
||||
submitMessage({ parameters: params, currentMessage });
|
||||
};
|
||||
|
||||
const handleApplyToAllModels = (e: any) => {
|
||||
@@ -104,17 +234,67 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
}
|
||||
};
|
||||
|
||||
const handleDropdownAction = ({ key }: { key: string }) => {
|
||||
console.log('key:', key);
|
||||
const handleClearMessage = () => {
|
||||
setMessageList([]);
|
||||
setTokenResult(null);
|
||||
setSystemMessage('');
|
||||
currentMessageRef.current = {} as MessageItemProps;
|
||||
};
|
||||
const handleCloseViewCode = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
const handleModelChange = (value: string) => {
|
||||
setParams({
|
||||
...params,
|
||||
model: value
|
||||
});
|
||||
handleClearMessage();
|
||||
};
|
||||
|
||||
const handlePresetMessageList = (list: MessageItemProps[]) => {
|
||||
currentMessageRef.current = {} as MessageItemProps;
|
||||
const messages = _.map(
|
||||
list,
|
||||
(item: { role: string; content: string }) => {
|
||||
setMessageId();
|
||||
return {
|
||||
role: item.role,
|
||||
content: item.content,
|
||||
uid: messageId.current
|
||||
};
|
||||
}
|
||||
);
|
||||
setTokenResult(null);
|
||||
setMessageList(messages);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
handleDeleteModel(params.model);
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
setAutoSize({
|
||||
minRows: 4,
|
||||
maxRows: 4
|
||||
});
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
setAutoSize({
|
||||
minRows: 1,
|
||||
maxRows: 1
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('globalParams:', globalParams.model, globalParams);
|
||||
setParams({
|
||||
...params,
|
||||
model: model,
|
||||
...globalParams
|
||||
});
|
||||
}, [globalParams]);
|
||||
}, [globalParams, model]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -122,6 +302,18 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
};
|
||||
}, []);
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
submit: handleSubmit,
|
||||
abortFetch,
|
||||
setMessageList,
|
||||
clear: handleClearMessage,
|
||||
presetPrompt: handlePresetMessageList,
|
||||
setSystemMessage,
|
||||
loading
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="model-item">
|
||||
<div className="header">
|
||||
@@ -133,9 +325,29 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
value={params.model}
|
||||
></Select>
|
||||
</span>
|
||||
<ReferenceParams usage={tokenResult}></ReferenceParams>
|
||||
<span className="action">
|
||||
<Dropdown
|
||||
menu={{ items: actions, onSelect: handleDropdownAction }}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
label: intl.formatMessage({ id: 'common.button.clear' }),
|
||||
key: 'clear',
|
||||
icon: <ClearOutlined />,
|
||||
onClick: () => {
|
||||
handleDropdownAction({ key: 'clear' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: intl.formatMessage({ id: 'playground.viewcode' }),
|
||||
key: 'viewcode',
|
||||
icon: <IconFont type="icon-code" />,
|
||||
onClick: () => {
|
||||
handleDropdownAction({ key: 'viewCode' });
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button
|
||||
@@ -170,14 +382,43 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
size="small"
|
||||
></Button>
|
||||
</Popover>
|
||||
<Button type="text" icon={<CloseOutlined />} size="small"></Button>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<CloseOutlined />}
|
||||
size="small"
|
||||
onClick={handleDelete}
|
||||
></Button>
|
||||
</span>
|
||||
</div>
|
||||
<SimpleBar style={{ height: 'calc(100% - 46px)' }}>
|
||||
<div className="content">
|
||||
<MessageContent messageList={messageList} />
|
||||
</div>
|
||||
</SimpleBar>
|
||||
<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>
|
||||
<div className="content">
|
||||
<MessageContent
|
||||
spans={spans}
|
||||
messageList={messageList}
|
||||
loading={loadingStatus[params.model]}
|
||||
/>
|
||||
</div>
|
||||
<ViewCodeModal
|
||||
open={show}
|
||||
systemMessage={systemMessage}
|
||||
messageList={messageList}
|
||||
parameters={params}
|
||||
onCancel={handleCloseViewCode}
|
||||
title={intl.formatMessage({ id: 'playground.viewcode' })}
|
||||
></ViewCodeModal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user