feat: add models compare

src/pages/playground/components/message-input.tsx

@@ -5,13 +5,16 @@ import {
   ClearOutlined,
   ControlOutlined,
   PictureOutlined,
-  SendOutlined
+  SendOutlined,
+  SwapOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Select } from 'antd';
+import { Button, Divider, Input, Select } from 'antd';
 import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { Roles } from '../config';
 import '../style/message-input.less';
+import PromptModal from './prompt-modal';
 
 const layoutOptions = [
   {
@@ -36,7 +39,7 @@ const layoutOptions = [
     label: '4 columns',
     icon: 'icon-cols_4',
     value: {
-      span: 6,
+      span: 12,
       count: 4
     },
     tips: 'four models compare'
@@ -54,31 +57,47 @@ const layoutOptions = [
 
 interface MessageInputProps {
   modelList: Global.BaseOption<string>[];
-  handleSubmit: (value: string) => void;
+  handleSubmit: (params: { role: string; content: string }) => void;
   handleAbortFetch: () => void;
-  setParamsSettings: (value: Record<string, any>) => void;
   setSpans: (value: { span: number; count: number }) => void;
+  clearAll: () => void;
+  setModelSelections: (modelList: Global.BaseOption<string>[]) => void;
+  presetPrompt: (list: { role: string; content: string }[]) => void;
   loading: boolean;
 }
 
 const MessageInput: React.FC<MessageInputProps> = ({
   handleSubmit,
   handleAbortFetch,
-  setParamsSettings,
+  setModelSelections,
+  presetPrompt,
   loading,
   modelList,
+  clearAll,
   setSpans
 }) => {
   const { TextArea } = Input;
   const intl = useIntl();
   const platform = platformCall();
   const [disabled, setDisabled] = useState(false);
-  const [message, setMessage] = useState('');
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState<{ role: string; content: string }>({
+    role: Roles.User,
+    content: ''
+  });
   const handleInputChange = (value: string) => {
-    setMessage(value);
+    console.log('input change:', value);
+    setMessage({
+      ...message,
+      content: value
+    });
   };
   const handleSendMessage = () => {
-    handleSubmit(message);
+    handleSubmit({ ...message });
+    setMessage({
+      ...message,
+      content: ''
+    });
   };
   const onStop = () => {
     setDisabled(false);
@@ -88,6 +107,33 @@ const MessageInput: React.FC<MessageInputProps> = ({
     console.log('layout change:', value);
     setSpans(value);
   };
+
+  const handleToggleRole = () => {
+    setMessage({
+      ...message,
+      role: message.role === Roles.User ? Roles.Assistant : Roles.User
+    });
+  };
+
+  const handleClearAll = (e: any) => {
+    e.stopPropagation();
+    clearAll();
+  };
+
+  const handleUpdateModelSelections = (value: string[]) => {
+    console.log('update model selections:', value);
+    const list = value?.map?.((val) => {
+      return {
+        value: val,
+        label: val
+      };
+    });
+    setModelSelections(list);
+  };
+
+  const handleOpenPrompt = () => {
+    setOpen(true);
+  };
   useHotkeys(
     HotKeys.SUBMIT.join(','),
     () => {
@@ -99,10 +145,29 @@ const MessageInput: React.FC<MessageInputProps> = ({
     <div className="messageInput">
       <div className="tool-bar">
         <div className="actions">
+          <Button
+            type="text"
+            size="middle"
+            onClick={handleToggleRole}
+            icon={<SwapOutlined rotate={90} />}
+          >
+            {intl.formatMessage({ id: `playground.${message.role}` })}
+          </Button>
+          <Divider type="vertical" style={{ margin: 0 }} />
           <Button type="text" icon={<PictureOutlined />} size="middle"></Button>
-          <Button type="text" icon={<ClearOutlined />} size="middle"></Button>
-          <Button type="text" icon={<ControlOutlined />} size="middle"></Button>
-
+          <Button
+            type="text"
+            icon={<ClearOutlined />}
+            size="middle"
+            onClick={handleClearAll}
+          ></Button>
+          <Button
+            type="text"
+            icon={<ControlOutlined />}
+            size="middle"
+            onClick={handleOpenPrompt}
+          ></Button>
+          <Divider type="vertical" style={{ margin: 0 }} />
           {layoutOptions.map((option) => (
             <Button
               key={option.icon}
@@ -123,13 +188,20 @@ const MessageInput: React.FC<MessageInputProps> = ({
             maxCount={6}
             maxTagCount={0}
             maxTagTextLength={15}
+            onChange={handleUpdateModelSelections}
           ></Select>
           {!loading ? (
-            <Button type="primary" onClick={handleSendMessage} size="middle">
+            <Button
+              style={{ width: 44 }}
+              type="primary"
+              onClick={handleSendMessage}
+              size="middle"
+            >
               <SendOutlined />
             </Button>
           ) : (
             <Button
+              style={{ width: 44 }}
               type="primary"
               onClick={onStop}
               size="middle"
@@ -139,13 +211,18 @@ const MessageInput: React.FC<MessageInputProps> = ({
         </div>
       </div>
       <TextArea
-        placeholder="Send your message"
+        placeholder="Type your message here"
         autoSize={{ minRows: 3, maxRows: 3 }}
         onChange={(e) => handleInputChange(e.target.value)}
-        value={message}
+        value={message.content}
         size="large"
         variant="borderless"
       ></TextArea>
+      <PromptModal
+        open={open}
+        onCancel={() => setOpen(false)}
+        onSelect={presetPrompt}
+      ></PromptModal>
     </div>
   );
 };