(feature)(webapp) add show case and support multiple selection and deletion of filter conditions (#251)

webapp/packages/chat-sdk/src/Chat/ChatFooter/index.tsx

@@ -21,6 +21,7 @@ type Props = {
   onSendMsg: (msg: string, modelId?: number) => void;
   onAddConversation: (agent?: AgentType) => void;
   onSelectAgent: (agent: AgentType) => void;
+  onOpenShowcase: () => void;
 };
 
 const { OptGroup, Option } = Select;
@@ -47,6 +48,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
     onSendMsg,
     onAddConversation,
     onSelectAgent,
+    onOpenShowcase,
   },
   ref
 ) => {
@@ -313,14 +315,24 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
           <IconFont type="icon-zhinengzhuli" className={styles.toolIcon} />
           <div>智能助理</div>
         </div>
+        {!isMobile && (
+          <div className={styles.toolItem} onClick={onOpenShowcase}>
+            <IconFont type="icon-showcase" className={styles.toolIcon} />
+            <div>showcase</div>
+          </div>
+        )}
       </div>
       <div className={styles.composer}>
         <div className={styles.composerInputWrapper}>
           <AutoComplete
             className={styles.composerInput}
-            placeholder={`智能助理${
-              isMobile ? `[${currentAgent?.name}]` : `【${currentAgent?.name}】`
-            }将与您对话，输入“/”可切换助理`}
+            placeholder={
+              currentAgent
+                ? `智能助理${
+                    isMobile ? `[${currentAgent?.name}]` : `【${currentAgent?.name}】`
+                  }将与您对话，输入“/”可切换助理`
+                : '请输入您的问题'
+            }
             value={inputMsg}
             onChange={(value: string) => {
               onInputMsgChange(value);

webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx

@@ -22,7 +22,8 @@ type Props = {
     data: MsgDataType,
     questionId: string | number,
     question: string,
-    valid: boolean
+    valid: boolean,
+    isRefresh?: boolean
   ) => void;
   onSendMsg: (value: string) => void;
 };
@@ -72,6 +73,7 @@ const MessageContainer: React.FC<Props> = ({
             type,
             msg,
             msgValue,
+            score,
             identityMsg,
             msgData,
             filters,
@@ -93,13 +95,14 @@ const MessageContainer: React.FC<Props> = ({
                     conversationId={chatId}
                     modelId={modelId}
                     agentId={agentId}
+                    score={score}
                     filter={filters}
                     isLastMessage={index === messageList.length - 1}
                     triggerResize={triggerResize}
                     isDeveloper={isDeveloper}
                     integrateSystem={integrateSystem}
-                    onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
-                      onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
+                    onMsgDataLoaded={(data: MsgDataType, valid: boolean, isRefresh) => {
+                      onMsgDataLoaded(data, msgId, msgValue || msg || '', valid, isRefresh);
                     }}
                     onUpdateMessageScroll={updateMessageContainerScroll}
                     onSendMsg={onSendMsg}

webapp/packages/chat-sdk/src/Chat/components/Text.tsx

@@ -5,14 +5,16 @@ import LeftAvatar from './CopilotAvatar';
 import Message from './Message';
 import styles from './style.module.less';
 import { userAvatarUrl } from '../../common/env';
+import IconFont from '../../components/IconFont';
 
 type Props = {
   position: 'left' | 'right';
   data: any;
   quote?: string;
+  anonymousUser?: boolean;
 };
 
-const Text: React.FC<Props> = ({ position, data, quote }) => {
+const Text: React.FC<Props> = ({ position, data, quote, anonymousUser }) => {
   const textWrapperClass = classNames(styles.textWrapper, {
     [styles.rightTextWrapper]: position === 'right',
   });
@@ -25,7 +27,13 @@ const Text: React.FC<Props> = ({ position, data, quote }) => {
         <div className={styles.text}>{data}</div>
       </Message>
       {!isMobile && position === 'right' && rightAvatarUrl && (
-        <Avatar shape="circle" size={40} src={rightAvatarUrl} className={styles.rightAvatar} />
+        <Avatar
+          shape="circle"
+          size={40}
+          src={anonymousUser ? undefined : rightAvatarUrl}
+          icon={<IconFont type="icon-geren" />}
+          className={styles.rightAvatar}
+        />
       )}
     </div>
   );

webapp/packages/chat-sdk/src/Chat/index.tsx

@@ -20,6 +20,8 @@ import AgentList from './AgentList';
 import MobileAgents from './MobileAgents';
 import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/type';
 import { getHistoryMsg } from '../service';
+import ShowCase from '../ShowCase';
+import { Modal } from 'antd';
 
 type Props = {
   token?: string;
@@ -30,7 +32,6 @@ type Props = {
   isDeveloper?: boolean;
   integrateSystem?: string;
   isCopilot?: boolean;
-  apiUrl?: string;
   onCurrentAgentChange?: (agent?: AgentType) => void;
   onReportMsgEvent?: (msg: string, valid: boolean) => void;
 };
@@ -45,7 +46,6 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
     isDeveloper,
     integrateSystem,
     isCopilot,
-    apiUrl,
     onCurrentAgentChange,
     onReportMsgEvent,
   },
@@ -64,6 +64,7 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
   const [currentAgent, setCurrentAgent] = useState<AgentType>();
   const [mobileAgentsVisible, setMobileAgentsVisible] = useState(false);
   const [agentListVisible, setAgentListVisible] = useState(true);
+  const [showCaseVisible, setShowCaseVisible] = useState(false);
 
   const conversationRef = useRef<any>();
   const chatFooterRef = useRef<any>();
@@ -120,12 +121,6 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
     }
   }, [token]);
 
-  useEffect(() => {
-    if (apiUrl) {
-      localStorage.setItem('SUPERSONIC_CHAT_API_URL', apiUrl);
-    }
-  }, [apiUrl]);
-
   useEffect(() => {
     if (chatVisible) {
       inputFocus();
@@ -300,7 +295,8 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
     data: MsgDataType,
     questionId: string | number,
     question: string,
-    valid: boolean
+    valid: boolean,
+    isRefresh?: boolean
   ) => {
     onReportMsgEvent?.(question, valid);
     if (!isMobile) {
@@ -315,7 +311,9 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
       msg.msgData = data;
       setMessageList(msgs);
     }
-    updateMessageContainerScroll(`${questionId}`);
+    if (!isRefresh) {
+      updateMessageContainerScroll(`${questionId}`);
+    }
   };
 
   const onToggleHistoryVisible = () => {
@@ -404,6 +402,9 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
                         setAgentListVisible(!agentListVisible);
                       }
                     }}
+                    onOpenShowcase={() => {
+                      setShowCaseVisible(!showCaseVisible);
+                    }}
                     ref={chatFooterRef}
                   />
                 )}
@@ -419,6 +420,23 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
           onCloseConversation={onCloseConversation}
           ref={conversationRef}
         />
+        {currentAgent && (
+          <Modal
+            title="showcase"
+            width="98%"
+            open={showCaseVisible}
+            centered
+            footer={null}
+            wrapClassName={styles.showCaseModal}
+            onCancel={() => {
+              setShowCaseVisible(false);
+            }}
+          >
+            <div className={styles.showCase}>
+              <ShowCase agentId={currentAgent.id} onSendMsg={onSendMsg} />
+            </div>
+          </Modal>
+        )}
       </div>
       <MobileAgents
         open={mobileAgentsVisible}

webapp/packages/chat-sdk/src/Chat/style.module.less

@@ -77,6 +77,21 @@
   }
 }
 
+.showCaseModal {
+  :global {
+    .ant-modal-body {
+      padding: 20px 0 !important;
+    }
+  }
+}
+
+.showCase {
+  height: calc(100vh - 140px);
+  padding: 0 20px;
+  overflow-y: auto;
+  padding-bottom: 2px;
+}
+
 :global {
   .ss-chat-recommend-options {
     .ant-table-thead .ant-table-cell {