diff --git a/src/components/markdown-viewer/index.tsx b/src/components/markdown-viewer/index.tsx index 130efd2a..22d7ab3b 100644 --- a/src/components/markdown-viewer/index.tsx +++ b/src/components/markdown-viewer/index.tsx @@ -70,7 +70,6 @@ const MarkdownViewer: React.FC = ({ const renderItem = useCallback( (token: any, render: any) => { - console.log('token====', token); if (!reDefineTypes.includes(token.type)) { return ( = forwardRef((props, ref) => { reasoningContent: string; }) => { if (data.reasoningContent && !data.content) { - return `${data.reasoningContent}${data.content}`; + return `${data.reasoningContent}`; } if (data.reasoningContent && data.content) { return `${data.reasoningContent}${data.content}`; @@ -127,15 +127,18 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { _.get(chunk, 'choices.0.delta.reasoning_content', ''); contentRef.current = contentRef.current + _.get(chunk, 'choices.0.delta.content', ''); + + const content = formatContent({ + content: contentRef.current, + reasoningContent: reasonContentRef.current + }); + setMessageList([ ...messageList, ...currentMessageRef.current, { role: Roles.Assistant, - content: formatContent({ - content: contentRef.current, - reasoningContent: reasonContentRef.current - }), + content: content, uid: messageId.current } ]); diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx index 80e59243..221cc81a 100644 --- a/src/pages/playground/components/multiple-chat/index.tsx +++ b/src/pages/playground/components/multiple-chat/index.tsx @@ -3,7 +3,11 @@ import _ from 'lodash'; import 'overlayscrollbars/overlayscrollbars.css'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import CompareContext from '../../config/compare-context'; -import { MessageItem, ModelSelectionItem } from '../../config/types'; +import { + MessageItem, + MessageItemAction, + ModelSelectionItem +} from '../../config/types'; import '../../style/multiple-chat.less'; import EmptyModels from '../empty-models'; import MessageInput from '../message-input'; @@ -42,6 +46,11 @@ const MultiCompare: React.FC = ({ modelList, loaded }) => { const modelRefs = useRef({}); const chatListScrollRef = useRef(null); const boxHeight = 'calc(100vh - 72px)'; + const [actions, setActions] = useState([ + 'upload', + 'delete', + 'copy' + ]); const isLoading = useMemo(() => { const modelRefList = Object.getOwnPropertySymbols(loadingStatus); @@ -228,6 +237,15 @@ const MultiCompare: React.FC = ({ modelList, loaded }) => { handleUpdateModelList(value); }; + const handleOnCheck = (e: any) => { + const checked = e.target.checked; + if (checked) { + setActions(['upload', 'delete', 'copy', 'markdown']); + } else { + setActions(['upload', 'delete', 'copy']); + } + }; + useEffect(() => { modelRefs.current = {}; let list = _.take(modelList, spans.count); @@ -268,6 +286,7 @@ const MultiCompare: React.FC = ({ modelList, loaded }) => { globalParams, loadingStatus, modelFullList: modelList, + actions, handleApplySystemChangeToAll, setGlobalParams, setLoadingStatus: handleSetLoadingStatus, @@ -302,6 +321,18 @@ const MultiCompare: React.FC = ({ modelList, loaded }) => { updateLayout={updateLayout} setModelSelections={handleUpdateModelSelections} presetPrompt={handlePresetPrompt} + actions={[ + 'clear', + 'layout', + 'role', + 'upload', + 'add', + 'paste', + 'check' + ]} + defaultChecked={false} + checkLabel="Markdown" + onCheck={handleOnCheck} defaultSize={{ minRows: 5, maxRows: 5 diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx index e2bd181c..090f771b 100644 --- a/src/pages/playground/components/multiple-chat/model-item.tsx +++ b/src/pages/playground/components/multiple-chat/model-item.tsx @@ -50,7 +50,8 @@ const ModelItem: React.FC = forwardRef( handleDeleteModel, handleApplySystemChangeToAll, modelFullList, - loadingStatus + loadingStatus, + actions } = useContext(CompareContext); const intl = useIntl(); const isApplyToAllModels = useRef(false); @@ -93,7 +94,7 @@ const ModelItem: React.FC = forwardRef( reasoningContent: string; }) => { if (data.reasoningContent && !data.content) { - return `${data.reasoningContent}${data.content}`; + return `${data.reasoningContent}`; } if (data.reasoningContent && data.content) { return `${data.reasoningContent}${data.content}`; @@ -117,15 +118,16 @@ const ModelItem: React.FC = forwardRef( contentRef.current = contentRef.current + _.get(chunk, 'choices.0.delta.content', ''); + const content = formatContent({ + content: contentRef.current, + reasoningContent: reasonContentRef.current + }); setMessageList([ ...messageList, ...currentMessageRef.current, { role: Roles.Assistant, - content: formatContent({ - content: contentRef.current, - reasoningContent: reasonContentRef.current - }), + content, uid: messageId.current } ]); @@ -476,6 +478,7 @@ const ModelItem: React.FC = forwardRef( = ({ content }) => { + const intl = useIntl(); + const [collapsed, setCollapsed] = useState(false); return ( <> {content ? (
- - -
{content}
+
+ +
+ {!collapsed &&
{content}
}
) : null} diff --git a/src/pages/playground/components/multiple-chat/think-parser.ts b/src/pages/playground/components/multiple-chat/think-parser.ts index 15a231d3..c447875d 100644 --- a/src/pages/playground/components/multiple-chat/think-parser.ts +++ b/src/pages/playground/components/multiple-chat/think-parser.ts @@ -1,8 +1,8 @@ class ThinkParser { + private lastCheckedIndex: number; + private collecting: boolean; thought: string; result: string; - collecting: boolean; - lastCheckedIndex: number; constructor() { this.thought = ''; @@ -12,40 +12,33 @@ class ThinkParser { } parse(chunk: string) { - if (this.lastCheckedIndex < chunk.length) { - const currentChunk = chunk.substring(this.lastCheckedIndex); - + while (this.lastCheckedIndex < chunk.length) { if (!this.collecting) { - // find tag - let startIndex = currentChunk.indexOf(''); + let startIndex = chunk.indexOf('', this.lastCheckedIndex); if (startIndex !== -1) { - // handle text before tag - this.result += currentChunk.substring(0, startIndex); - // handle thought part - this.thought += currentChunk.substring(startIndex + 7); + this.result += chunk.substring(this.lastCheckedIndex, startIndex); this.collecting = true; + this.lastCheckedIndex = startIndex + 7; } else { - // if no tag found, just append the whole chunk to result - this.result += currentChunk; + this.result += chunk.substring(this.lastCheckedIndex); + this.lastCheckedIndex = chunk.length; + break; } } else { - // find tag - let endIndex = currentChunk.indexOf(''); + let endIndex = chunk.indexOf('', this.lastCheckedIndex); if (endIndex !== -1) { - // handle text before tag - this.thought += currentChunk.substring(0, endIndex); - // handle result part - this.result += currentChunk.substring(endIndex + 8); - + this.thought += chunk.substring(this.lastCheckedIndex, endIndex); this.collecting = false; + this.lastCheckedIndex = endIndex + 8; } else { - this.thought += currentChunk; + this.thought += chunk.substring(this.lastCheckedIndex); + this.lastCheckedIndex = chunk.length; + break; } - this.lastCheckedIndex = chunk.length; } } - return { thought: this.thought.trim(), result: this.result }; + return { thought: this.thought.trimStart(), result: this.result }; } reset() { diff --git a/src/pages/playground/config/compare-context.ts b/src/pages/playground/config/compare-context.ts index 5a4905e8..8237432f 100644 --- a/src/pages/playground/config/compare-context.ts +++ b/src/pages/playground/config/compare-context.ts @@ -1,10 +1,12 @@ import React from 'react'; +import { MessageItemAction } from './types'; interface CompareContextProps { spans: { span: number; count: number; }; + actions?: MessageItemAction[]; systemMessage?: string; globalParams: Record; loadingStatus: Record; diff --git a/src/pages/playground/style/content-item.less b/src/pages/playground/style/content-item.less index d80535f7..05abf71c 100644 --- a/src/pages/playground/style/content-item.less +++ b/src/pages/playground/style/content-item.less @@ -1,6 +1,14 @@ .content-item { margin-bottom: 12px; + .markdown-viewer { + h4 { + margin-top: 10px; + margin-bottom: 10px; + font-size: var(--font-size-middle); + } + } + &-role { display: flex; align-items: center; diff --git a/src/pages/playground/style/think-content.less b/src/pages/playground/style/think-content.less index a435475f..227f5fc1 100644 --- a/src/pages/playground/style/think-content.less +++ b/src/pages/playground/style/think-content.less @@ -1,13 +1,19 @@ .think-wrapper { margin-bottom: 16px; color: var(--ant-color-text-tertiary); - border-left: 2px solid var(--ant-color-fill-secondary); + + .btn-collapse { + margin-bottom: 8px; + border-radius: var(--border-radius-base); + width: max-content; + overflow: hidden; + } .think-content { white-space: pre-wrap; - padding: 6px 4px; + padding: 12px; + border-left: 2px solid var(--ant-color-fill-secondary); background-color: var(--ant-color-fill-tertiary); color: var(--ant-color-text-tertiary); - border-radius: var(--border-radius-base); } }