[feature](webapp) add a minimize button for copilot (#78)

webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx

@@ -207,7 +207,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
           : `${item.modelName || ''}${item.recommend}` === value,
       );
     if (option && isSelect) {
-      onSendMsg(option.recommend, option.modelId);
+      onSendMsg(option.recommend, Object.keys(stepOptions).length > 1 ? option.modelId : undefined);
     } else {
       onSendMsg(value.trim());
     }

webapp/packages/supersonic-fe/src/pages/Copilot/index.tsx

@@ -1,5 +1,6 @@
 import IconFont from '@/components/IconFont';
 import { CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import Chat from '../Chat';
 import { DefaultEntityType, ModelType } from '../Chat/type';
@@ -15,6 +16,7 @@ const Copilot: React.FC<Props> = ({ globalCopilotFilter, copilotSendMsg }) => {
   const [defaultModelName, setDefaultModelName] = useState('');
   const [defaultEntityFilter, setDefaultEntityFilter] = useState<DefaultEntityType>();
   const [triggerNewConversation, setTriggerNewConversation] = useState(false);
+  const [copilotMinimized, setCopilotMinimized] = useState(false);
 
   useEffect(() => {
     if (globalCopilotFilter && globalCopilotFilter.entityId !== defaultEntityFilter?.entityId) {
@@ -58,10 +60,29 @@ const Copilot: React.FC<Props> = ({ globalCopilotFilter, copilotSendMsg }) => {
     setTriggerNewConversation(false);
   };
 
+  const onMinimizeCopilot = (e: any) => {
+    e.stopPropagation();
+    updateChatVisible(false);
+    setCopilotMinimized(true);
+  };
+
+  const copilotClass = classNames(styles.copilot, {
+    [styles.copilotMinimized]: copilotMinimized,
+  });
+
   return (
     <>
-      <div className={styles.copilot} onClick={onToggleChatVisible}>
+      <div
+        className={copilotClass}
+        onMouseEnter={() => {
+          setCopilotMinimized(false);
+        }}
+        onClick={onToggleChatVisible}
+      >
         <IconFont type="icon-copilot-fill" />
+        <div className={styles.minimizeWrapper} onClick={onMinimizeCopilot}>
+          <div className={styles.minimize}>-</div>
+        </div>
       </div>
       <div className={styles.copilotContent} style={{ display: chatVisible ? 'block' : 'none' }}>
         <div className={styles.chatPopover}>

webapp/packages/supersonic-fe/src/pages/Copilot/style.less

@@ -10,7 +10,6 @@
   box-sizing: border-box;
   width: 54px;
   height: 54px;
-  overflow: hidden;
   color: #fff;
   font-size: 26px;
   background-color: var(--chat-blue);
@@ -19,11 +18,48 @@
   border-radius: 50%;
   box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, 0.1);
   cursor: pointer;
-  transition: all 0.3s ease-in-out;
+  transition: all 0.2s ease-in-out;
+
+  &.copilotMinimized {
+    right: -40px;
+  }
+
+  .minimizeWrapper {
+    display: none;
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    position: absolute;
+    right: -6px;
+    top: -18px;
+    padding: 4px;
+
+    .minimize {
+      width: 100%;
+      height: 100%;
+      padding-bottom: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: var(--text-color-fifth-4);
+      transition: all 0.1s ease-in-out;
+    }
+
+    &:hover {
+      .minimize {
+        background-color: var(--text-color-fifth);
+      }
+    }
+  }
 
   &:hover {
     text-decoration: none;
     box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.3);
+
+    .minimizeWrapper {
+      display: block;
+    }
   }
 }