test-chat-sdk 0.0.0

package/src/Chat/ChatFooter/index.tsx

@@ -0,0 +1,423 @@
+import IconFont from '../../components/IconFont';
+import { getTextWidth, groupByColumn, isMobile } from '../../utils/utils';
+import { AutoComplete, Select, Tag } from 'antd';
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import type { ForwardRefRenderFunction } from 'react';
+import { SemanticTypeEnum, SEMANTIC_TYPE_MAP, HOLDER_TAG } from '../constants';
+import { AgentType, ModelType } from '../type';
+import { searchRecommend } from '../../service';
+import styles from './style.module.less';
+import { useComposing } from '../../hooks/useComposing';
+
+type Props = {
+  inputMsg: string;
+  chatId?: number;
+  currentAgent?: AgentType;
+  agentList: AgentType[];
+  onToggleHistoryVisible: () => void;
+  onOpenAgents: () => void;
+  onInputMsgChange: (value: string) => void;
+  onSendMsg: (msg: string, dataSetId?: number) => void;
+  onAddConversation: (agent?: AgentType) => void;
+  onSelectAgent: (agent: AgentType) => void;
+  onOpenShowcase: () => void;
+};
+
+const { OptGroup, Option } = Select;
+let isPinyin = false;
+let isSelect = false;
+
+const compositionStartEvent = () => {
+  isPinyin = true;
+};
+
+const compositionEndEvent = () => {
+  isPinyin = false;
+};
+
+const ChatFooter: ForwardRefRenderFunction<any, Props> = (
+  {
+    inputMsg,
+    chatId,
+    currentAgent,
+    agentList,
+    onToggleHistoryVisible,
+    onOpenAgents,
+    onInputMsgChange,
+    onSendMsg,
+    onAddConversation,
+    onSelectAgent,
+    onOpenShowcase,
+  },
+  ref
+) => {
+  const [modelOptions, setModelOptions] = useState<(ModelType | AgentType)[]>([]);
+  const [stepOptions, setStepOptions] = useState<Record<string, any[]>>({});
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<any>();
+  const fetchRef = useRef(0);
+
+  const inputFocus = () => {
+    inputRef.current?.focus();
+  };
+
+  const inputBlur = () => {
+    inputRef.current?.blur();
+  };
+
+  useImperativeHandle(ref, () => ({
+    inputFocus,
+    inputBlur,
+  }));
+
+  const initEvents = () => {
+    const autoCompleteEl = document.getElementById('chatInput');
+    autoCompleteEl!.addEventListener('compositionstart', compositionStartEvent);
+    autoCompleteEl!.addEventListener('compositionend', compositionEndEvent);
+  };
+
+  const removeEvents = () => {
+    const autoCompleteEl = document.getElementById('chatInput');
+    if (autoCompleteEl) {
+      autoCompleteEl.removeEventListener('compositionstart', compositionStartEvent);
+      autoCompleteEl.removeEventListener('compositionend', compositionEndEvent);
+    }
+  };
+
+  useEffect(() => {
+    initEvents();
+    return () => {
+      removeEvents();
+    };
+  }, []);
+
+  const getStepOptions = (recommends: any[]) => {
+    const data = groupByColumn(recommends, 'dataSetName');
+    return isMobile && recommends.length > 6
+      ? Object.keys(data)
+          .slice(0, 4)
+          .reduce((result, key) => {
+            result[key] = data[key].slice(
+              0,
+              Object.keys(data).length > 2 ? 2 : Object.keys(data).length > 1 ? 3 : 6
+            );
+            return result;
+          }, {})
+      : data;
+  };
+
+  const processMsg = (msg: string) => {
+    let msgValue = msg;
+    let dataSetId: number | undefined;
+    if (msg?.[0] === '/') {
+      const agent = agentList.find(item => msg.includes(`/${item.name}`));
+      msgValue = agent ? msg.replace(`/${agent.name}`, '') : msg;
+    }
+    return { msgValue, dataSetId };
+  };
+
+  const debounceGetWordsFunc = useCallback(() => {
+    const getAssociateWords = async (msg: string, chatId?: number, currentAgent?: AgentType) => {
+      if (isPinyin) {
+        return;
+      }
+      if (msg === '' || (msg.length === 1 && msg[0] === '@')) {
+        return;
+      }
+      fetchRef.current += 1;
+      const fetchId = fetchRef.current;
+      const { msgValue, dataSetId } = processMsg(msg);
+      const res = await searchRecommend(msgValue.trim(), chatId, dataSetId, currentAgent?.id);
+      if (fetchId !== fetchRef.current) {
+        return;
+      }
+      const recommends = msgValue ? res.data || [] : [];
+      const stepOptionList = recommends.map((item: any) => item.subRecommend);
+      if (stepOptionList.length > 0 && stepOptionList.every((item: any) => item !== null)) {
+        setStepOptions(getStepOptions(recommends));
+      } else {
+        setStepOptions({});
+      }
+      setOpen(recommends.length > 0);
+    };
+    return debounce(getAssociateWords, 200);
+  }, []);
+
+  const [debounceGetWords] = useState<any>(debounceGetWordsFunc);
+
+  useEffect(() => {
+    if (inputMsg.length === 1 && inputMsg[0] === '/') {
+      setOpen(true);
+      setModelOptions(agentList);
+      setStepOptions({});
+      return;
+    }
+    if (modelOptions.length > 0) {
+      setTimeout(() => {
+        setModelOptions([]);
+      }, 50);
+    }
+    if (!isSelect) {
+      debounceGetWords(inputMsg, chatId, currentAgent);
+    } else {
+      isSelect = false;
+    }
+    if (!inputMsg) {
+      setStepOptions({});
+      fetchRef.current = 0;
+    }
+  }, [inputMsg]);
+
+  useEffect(() => {
+    if (!focused) {
+      setOpen(false);
+    }
+  }, [focused]);
+
+  useEffect(() => {
+    const autoCompleteDropdown = document.querySelector(
+      `.${styles.autoCompleteDropdown}`
+    ) as HTMLElement;
+    if (!autoCompleteDropdown) {
+      return;
+    }
+    const textWidth = getTextWidth(inputMsg);
+    if (Object.keys(stepOptions).length > 0) {
+      autoCompleteDropdown.style.marginLeft = `${textWidth}px`;
+    } else {
+      setTimeout(() => {
+        autoCompleteDropdown.style.marginLeft = `0px`;
+      }, 200);
+    }
+  }, [stepOptions]);
+
+  const sendMsg = (value: string) => {
+    const option = Object.keys(stepOptions)
+      .reduce((result: any[], item) => {
+        result = result.concat(stepOptions[item]);
+        return result;
+      }, [])
+      .find(item =>
+        Object.keys(stepOptions).length === 1
+          ? item.recommend === value
+          : `${item.dataSetName || ''}${item.recommend}` === value
+      );
+
+    if (option && isSelect) {
+      onSendMsg(option.recommend, option.dataSetIds);
+    } else {
+      onSendMsg(value.trim(), option?.dataSetId);
+    }
+  };
+
+  const autoCompleteDropdownClass = classNames(styles.autoCompleteDropdown, {
+    [styles.mobile]: isMobile,
+    [styles.modelOptions]: modelOptions.length > 0,
+  });
+
+  const onSelect = (value: string) => {
+    isSelect = true;
+    if (modelOptions.length > 0) {
+      const agent = agentList.find(item => value.includes(item.name));
+      if (agent) {
+        if (agent.id !== currentAgent?.id) {
+          onSelectAgent(agent);
+        }
+        onInputMsgChange('');
+      }
+    } else {
+      onInputMsgChange(value.replace(HOLDER_TAG, ''));
+    }
+    setOpen(false);
+    setTimeout(() => {
+      isSelect = false;
+    }, 200);
+  };
+
+  const chatFooterClass = classNames(styles.chatFooter, {
+    [styles.mobile]: isMobile,
+  });
+
+  const modelOptionNodes = modelOptions.map(model => {
+    return (
+      <Option key={model.id} value={`/${model.name} `} className={styles.searchOption}>
+        {model.name}
+      </Option>
+    );
+  });
+
+  const associateOptionNodes = Object.keys(stepOptions).map(key => {
+    return (
+      <OptGroup key={key} label={key}>
+        {stepOptions[key].map(option => {
+          let optionValue =
+            Object.keys(stepOptions).length === 1
+              ? option.recommend
+              : `${option.dataSetName || ''}${option.recommend}`;
+          if (inputMsg[0] === '/') {
+            const agent = agentList.find(item => inputMsg.includes(item.name));
+            optionValue = agent ? `/${agent.name} ${option.recommend}` : optionValue;
+          }
+          return (
+            <Option
+              key={`${option.recommend}${option.dataSetName ? `_${option.dataSetName}` : ''}`}
+              value={`${optionValue}${HOLDER_TAG}`}
+              className={styles.searchOption}
+            >
+              <div className={styles.optionContent}>
+                {option.schemaElementType && (
+                  <Tag
+                    className={styles.semanticType}
+                    color={
+                      option.schemaElementType === SemanticTypeEnum.DIMENSION ||
+                      option.schemaElementType === SemanticTypeEnum.MODEL
+                        ? 'blue'
+                        : option.schemaElementType === SemanticTypeEnum.VALUE
+                        ? 'geekblue'
+                        : 'cyan'
+                    }
+                  >
+                    {SEMANTIC_TYPE_MAP[option.schemaElementType] ||
+                      option.schemaElementType ||
+                      '维度'}
+                  </Tag>
+                )}
+                {option.subRecommend}
+              </div>
+            </Option>
+          );
+        })}
+      </OptGroup>
+    );
+  });
+
+  const fixWidthBug = () => {
+    setTimeout(() => {
+      const dropdownDom = document.querySelector(
+        '.' + styles.autoCompleteDropdown + ' .rc-virtual-list-holder-inner'
+      );
+
+      if (!dropdownDom) {
+        fixWidthBug();
+      } else {
+        // 获取popoverDom样式
+        const popoverDomStyle = window.getComputedStyle(dropdownDom);
+        // 在获取popoverDom中增加样式 width: fit-content
+        dropdownDom.setAttribute('style', `${popoverDomStyle.cssText};width: fit-content`);
+        // 获取popoverDom的宽度
+        const popoverDomWidth = dropdownDom.clientWidth;
+        // 将popoverDom的宽度赋值给他的父元素
+        const offset = 20; // 预增加20px的宽度，预留空间给虚拟渲染出来的元素
+        dropdownDom.parentElement!.style.width = popoverDomWidth + offset + 'px';
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (modelOptionNodes.length || associateOptionNodes.length) fixWidthBug();
+  }, [modelOptionNodes.length, associateOptionNodes.length]);
+
+  const { isComposing } = useComposing(document.getElementById('chatInput'));
+
+  return (
+    <div className={chatFooterClass}>
+      <div className={styles.tools}>
+        <div
+          className={styles.toolItem}
+          onClick={() => {
+            onAddConversation();
+          }}
+        >
+          <IconFont type="icon-c003xiaoxiduihua" className={styles.toolIcon} />
+          <div>新对话</div>
+        </div>
+        {!isMobile && (
+          <div className={styles.toolItem} onClick={onToggleHistoryVisible}>
+            <IconFont type="icon-lishi" className={styles.toolIcon} />
+            <div>历史对话</div>
+          </div>
+        )}
+        {agentList?.length > 1 && (
+          <div className={styles.toolItem} onClick={onOpenAgents}>
+            <IconFont type="icon-zhinengzhuli" className={styles.toolIcon} />
+            <div>智能助理</div>
+          </div>
+        )}
+        <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={
+              currentAgent
+                ? `【${currentAgent.name}】将与您对话，点击${!isMobile ? '左侧' : ''}【智能助理】${
+                    !isMobile ? '列表' : ''
+                  }可切换`
+                : '请输入您的问题'
+            }
+            value={inputMsg}
+            onChange={(value: string) => {
+              onInputMsgChange(value);
+            }}
+            onSelect={onSelect}
+            autoFocus={!isMobile}
+            ref={inputRef}
+            id="chatInput"
+            onKeyDown={e => {
+              if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                const chatInputEl: any = document.getElementById('chatInput');
+                const agent = agentList.find(
+                  item => chatInputEl.value[0] === '/' && chatInputEl.value.includes(item.name)
+                );
+                if (agent) {
+                  if (agent.id !== currentAgent?.id) {
+                    onSelectAgent(agent);
+                  }
+                  onInputMsgChange('');
+                  return;
+                }
+                if (!isSelect && !isComposing) {
+                  sendMsg(chatInputEl.value);
+                  setOpen(false);
+                }
+              }
+            }}
+            onFocus={() => {
+              setFocused(true);
+            }}
+            onBlur={() => {
+              setFocused(false);
+            }}
+            dropdownClassName={autoCompleteDropdownClass}
+            listHeight={500}
+            allowClear
+            open={open}
+            defaultActiveFirstOption={false}
+            getPopupContainer={triggerNode => triggerNode.parentNode}
+          >
+            {modelOptions.length > 0 ? modelOptionNodes : associateOptionNodes}
+          </AutoComplete>
+          <div
+            className={classNames(styles.sendBtn, {
+              [styles.sendBtnActive]: inputMsg?.length > 0,
+            })}
+            onClick={() => {
+              sendMsg(inputMsg);
+            }}
+          >
+            <IconFont type="icon-ios-send" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default forwardRef(ChatFooter);

package/src/Chat/ChatFooter/style.module.less

@@ -0,0 +1,225 @@
+.chatFooter {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  margin: 6px 20px 20px;
+
+  .tools {
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+    column-gap: 8px;
+
+    .toolItem {
+      display: flex;
+      align-items: center;
+      padding: 2px 6px;
+      color: var(--text-color-secondary);
+      font-size: 12px;
+      column-gap: 6px;
+      background-color: #f6f6f6;
+      border-radius: 6px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f1f1f1;
+      }
+    }
+  }
+
+  .composer {
+    display: flex;
+    height: 70px;
+
+    .collapseBtn {
+      height: 46px;
+      margin: 0 10px;
+      color: var(--text-color-third);
+      font-size: 20px;
+      line-height: 46px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--chat-blue);
+      }
+    }
+
+    .addConversation {
+      height: 46px;
+      margin: 0 20px 0 10px;
+      color: var(--text-color-fourth);
+      font-size: 26px;
+      line-height: 54px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--chat-blue);
+      }
+    }
+
+    .composerInputWrapper {
+      position: relative;
+      flex: 1;
+
+      .composerInput {
+        width: 100%;
+        height: 100%;
+        :global {
+          .ant-select-selector {
+            box-sizing: border-box;
+            height: 100%;
+            overflow: hidden;
+            color: rgba(0, 0, 0, 0.87);
+            font-size: 14px;
+            word-break: break-all;
+            background: #f9f9f9;
+            border: 0;
+            border-radius: 8px;
+            transition: border-color 0.15s ease-in-out;
+            resize: none;
+
+            .ant-select-selection-search-input {
+              height: 40px !important;
+              padding: 0 12px;
+            }
+
+            .ant-select-selection-search {
+              right: 0 !important;
+              left: 0 !important;
+            }
+
+            .ant-select-selection-placeholder {
+              line-height: 40px;
+              margin-bottom: 30px;
+            }
+          }
+
+          .ant-select-clear {
+            right: auto;
+            left: 500px;
+            width: 16px;
+            height: 16px;
+            margin-top: -8px;
+            font-size: 16px;
+          }
+        }
+      }
+
+      :global {
+        .ant-select-focused {
+          .ant-select-selector {
+            box-shadow: rgb(74, 114, 245) 0px 0px 3px !important;
+          }
+        }
+      }
+    }
+  }
+
+  .sendBtn {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    color: #fff;
+    font-size: 20px;
+    background-color: rgb(184, 184, 191);
+    border: unset;
+    border-radius: 50%;
+    transition: background-color 0.3s ease 0s;
+
+    &.sendBtnActive {
+      background-color: var(--chat-blue);
+    }
+  }
+
+  &.mobile {
+    margin: 6px 10px 10px;
+
+    .addConversation {
+      height: 40px;
+      margin: 0 12px 0 4px;
+    }
+
+    .composer {
+      height: 40px;
+      :global {
+        .ant-select-selector {
+          font-size: 14px !important;
+        }
+
+        .ant-select-selection-search-input {
+          padding: 0 10px !important;
+        }
+
+        .ant-select-selection-placeholder {
+          margin-bottom: 0 !important;
+          padding-left: 0 !important;
+          line-height: 38px !important;
+        }
+      }
+    }
+
+    .sendBtn {
+      right: 4px;
+      bottom: 6px;
+    }
+  }
+}
+
+.searchOption {
+  padding: 6px 20px;
+  color: #212121;
+  font-size: 16px;
+}
+
+.mobile {
+  .searchOption {
+    min-height: 26px;
+    padding: 2px 12px;
+    font-size: 14px;
+  }
+}
+
+.model {
+  margin-top: 2px;
+  color: var(--text-color-fourth);
+  font-size: 13px;
+  line-height: 12px;
+}
+
+.autoCompleteDropdown {
+  left: 20px !important;
+  width: fit-content !important;
+  min-width: 100px !important;
+  border-radius: 6px;
+
+  &.modelOptions {
+    width: 150px !important;
+
+    .searchOption {
+      padding: 0 10px;
+      color: var(--text-color-secondary);
+      font-size: 14px;
+    }
+
+    :global {
+      .ant-select-item {
+        height: 30px !important;
+        line-height: 30px !important;
+      }
+    }
+  }
+}
+
+.semanticType {
+  margin-right: 10px;
+}
+
+.quoteText {
+  color: var(--chat-blue);
+}