[feature](webapp) upgrade agent

webapp/packages/supersonic-fe/src/pages/Copilot/constants.ts

@@ -0,0 +1,11 @@
+export const MODEL_PATH_MAP = {
+  song: '歌曲库',
+  'song-detail': '歌曲库',
+  singer: '艺人库',
+  'singer-detail': '艺人库',
+  album: '专辑库',
+  'album-detail': '专辑库',
+  'digital-album': '专辑库',
+  brand: '厂牌库',
+  'brand-detail': '厂牌库',
+};

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

@@ -1,36 +1,30 @@
 import IconFont from '@/components/IconFont';
-import {
-  CaretRightOutlined,
-  CloseOutlined,
-  FullscreenExitOutlined,
-  FullscreenOutlined,
-} from '@ant-design/icons';
-import classNames from 'classnames';
+import { CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
 import { useEffect, useState } from 'react';
 import Chat from '../Chat';
-import { ModelType } from '../Chat/type';
+import { DefaultEntityType, ModelType } from '../Chat/type';
 import styles from './style.less';
-import { useDispatch } from 'umi';
 
 type Props = {
+  globalCopilotFilter: DefaultEntityType;
   copilotSendMsg: string;
 };
 
-const Copilot: React.FC<Props> = ({ copilotSendMsg }) => {
+const Copilot: React.FC<Props> = ({ globalCopilotFilter, copilotSendMsg }) => {
   const [chatVisible, setChatVisible] = useState(false);
   const [defaultModelName, setDefaultModelName] = useState('');
-  const [fullscreen, setFullscreen] = useState(false);
+  const [defaultEntityFilter, setDefaultEntityFilter] = useState<DefaultEntityType>();
   const [triggerNewConversation, setTriggerNewConversation] = useState(false);
-  const dispatch = useDispatch();
 
   useEffect(() => {
-    const chatVisibleValue = localStorage.getItem('CHAT_VISIBLE') === 'true';
-    if (chatVisibleValue) {
-      setTimeout(() => {
-        setChatVisible(true);
-      }, 500);
+    if (globalCopilotFilter && globalCopilotFilter.entityId !== defaultEntityFilter?.entityId) {
+      setTriggerNewConversation(true);
     }
-  }, []);
+    setDefaultEntityFilter(globalCopilotFilter);
+    if (globalCopilotFilter?.modelName) {
+      setDefaultModelName(globalCopilotFilter.modelName);
+    }
+  }, [globalCopilotFilter]);
 
   useEffect(() => {
     if (copilotSendMsg) {
@@ -41,118 +35,62 @@ const Copilot: React.FC<Props> = ({ copilotSendMsg }) => {
 
   const updateChatVisible = (visible: boolean) => {
     setChatVisible(visible);
-    localStorage.setItem('CHAT_VISIBLE', visible ? 'true' : 'false');
   };
 
   const onToggleChatVisible = () => {
     const chatVisibleValue = !chatVisible;
     updateChatVisible(chatVisibleValue);
-    if (!chatVisibleValue) {
-      document.body.style.overflow = 'auto';
-    } else {
-      if (fullscreen) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = 'auto';
-      }
-    }
   };
 
   const onCloseChat = () => {
     updateChatVisible(false);
-    document.body.style.overflow = 'auto';
   };
 
   const onTransferChat = () => {
-    window.open(
-      `${window.location.href.includes('webapp') ? '/webapp' : ''}/chat?cid=${localStorage.getItem(
-        'CONVERSATION_ID',
-      )}${defaultModelName ? `&modelName=${defaultModelName}` : ''}`,
-    );
+    window.open('/chat');
   };
 
   const onCurrentModelChange = (model?: ModelType) => {
     setDefaultModelName(model?.name || '');
-    if (model?.name !== defaultModelName) {
-      onCancelCopilotFilter();
-    }
-  };
-
-  const onEnterFullscreen = () => {
-    setFullscreen(true);
-    document.body.style.overflow = 'hidden';
-  };
-
-  const onExitFullscreen = () => {
-    setFullscreen(false);
-    document.body.style.overflow = 'auto';
-  };
-
-  const onCheckMoreDetail = () => {
-    if (!fullscreen) {
-      onEnterFullscreen();
-    }
-  };
-
-  const onCancelCopilotFilter = () => {
-    dispatch({
-      type: 'globalState/setGlobalCopilotFilter',
-      payload: undefined,
-    });
   };
 
   const onNewConversationTriggered = () => {
     setTriggerNewConversation(false);
   };
 
-  const chatPopoverClass = classNames(styles.chatPopover, {
-    [styles.fullscreen]: fullscreen,
-  });
-
   return (
     <>
       <div className={styles.copilot} onClick={onToggleChatVisible}>
         <IconFont type="icon-copilot-fill" />
       </div>
-      {chatVisible && (
-        <div className={styles.copilotContent}>
-          <div className={chatPopoverClass}>
-            <div className={styles.header}>
-              <div className={styles.leftSection}>
-                <CloseOutlined className={styles.close} onClick={onCloseChat} />
-                {fullscreen ? (
-                  <FullscreenExitOutlined
-                    className={styles.fullscreen}
-                    onClick={onExitFullscreen}
-                  />
-                ) : (
-                  <FullscreenOutlined className={styles.fullscreen} onClick={onEnterFullscreen} />
-                )}
-                <IconFont
-                  type="icon-weibiaoti-"
-                  className={styles.transfer}
-                  onClick={onTransferChat}
-                />
-              </div>
-              <div className={styles.title}>Copilot</div>
-            </div>
-            <div className={styles.chat}>
-              <Chat
-                defaultModelName={defaultModelName}
-                copilotSendMsg={copilotSendMsg}
-                isCopilotMode
-                copilotFullscreen={fullscreen}
-                triggerNewConversation={triggerNewConversation}
-                onNewConversationTriggered={onNewConversationTriggered}
-                onCurrentModelChange={onCurrentModelChange}
-                onCancelCopilotFilter={onCancelCopilotFilter}
-                onCheckMoreDetail={onCheckMoreDetail}
+      <div className={styles.copilotContent} style={{ display: chatVisible ? 'block' : 'none' }}>
+        <div className={styles.chatPopover}>
+          <div className={styles.header}>
+            <div className={styles.leftSection}>
+              <CloseOutlined className={styles.close} onClick={onCloseChat} />
+              <IconFont
+                type="icon-weibiaoti-"
+                className={styles.transfer}
+                onClick={onTransferChat}
               />
             </div>
+            <div className={styles.title}>内容库问答</div>
+          </div>
+          <div className={styles.chat}>
+            <Chat
+              copilotSendMsg={copilotSendMsg}
+              defaultModelName={defaultModelName}
+              defaultEntityFilter={defaultEntityFilter}
+              triggerNewConversation={triggerNewConversation}
+              chatVisible={chatVisible}
+              isCopilotMode
+              onNewConversationTriggered={onNewConversationTriggered}
+              onCurrentModelChange={onCurrentModelChange}
+            />
           </div>
-          <CaretRightOutlined className={styles.rightArrow} />
         </div>
-      )}
+        <CaretRightOutlined className={styles.rightArrow} />
+      </div>
     </>
   );
 };

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

@@ -34,10 +34,11 @@
   z-index: 999;
   display: flex;
   flex-direction: column;
-  width: 50vw;
+  width: 70vw;
+  min-width: 1100px;
   height: 90vh;
   overflow: hidden;
-  box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.1), -2px -2px 16px rgba(55, 99, 170, 0.1);
+  box-shadow: 4px 4px 10px rgba(55, 99, 170, 0.3), -2px -2px 16px rgba(55, 99, 170, 0.3);
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
     -webkit-transform 0.3s ease-in-out;
 
@@ -47,16 +48,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 50px;
+    height: 40px;
     padding-right: 16px;
     padding-left: 16px;
-    background: linear-gradient(90deg, #4692ff 0%, #1877ff 98%);
+    background: linear-gradient(81.62deg, #2870ea 8.72%, var(--chat-blue) 85.01%);
     box-shadow: 1px 1px 8px #1b4aef5c;
 
     .title {
       color: #fff;
       font-weight: 700;
-      font-size: 18px;
+      font-size: 16px;
     }
 
     .leftSection {
@@ -85,13 +86,13 @@
   }
 
   .chat {
-    height: calc(90vh - 50px);
+    height: calc(90vh - 40px);
   }
 
   &.fullscreen {
     bottom: 0;
-    left: 0;
-    width: calc(100vw - 90px);
+    left: 60px;
+    width: calc(100vw - 150px);
     height: 100vh;
 
     .chat {