@myun/gimi-chat 0.9.22 → 0.9.23

package/dist/components/ai-chat-dialogue/index.js

@@ -24,7 +24,6 @@ import LottieImg from "../lottie-img";
 import styles from "./index.module.css";
 import classNames from 'classnames';
 import { Toast, Tooltip } from '@douyinfe/semi-ui';
-import Header from "../header";
 import IconFontCom from "../iconfont-com";
 import { debounce } from 'lodash';
 import useScroll from "../../hooks/useScroll";
@@ -866,6 +865,12 @@ var AiExplain = function AiExplain(_ref) {
       setHeaderTitle(finalTitle);
     }
   }, [messageList]);
+  useEffect(function () {
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, []);
 
   //  初始化语音对话（核心业务入口）
   useEffect(function () {
@@ -975,35 +980,13 @@ var AiExplain = function AiExplain(_ref) {
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     className: styles.aiChat
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.bgImg
-  }, /*#__PURE__*/React.createElement(LottieImg, {
-    name: "aiBg",
-    size: ['100%', '100%']
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.rightWrap
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    zIndex: 10000,
-    placement: "bottom",
-    visible: showWordsTooltip,
-    onVisibleChange: setShowWordsTooltip,
-    content: showCaptions ? t('aiDialogue.closeCaptions') : t('aiDialogue.openCaptions'),
-    overlayClassName: "ai-chat-tooltip"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.iconWrap
-  }, /*#__PURE__*/React.createElement(IconFontCom, {
-    type: !showCaptions ? 'icon-a-tongyong-zhankaibeifen1' : 'icon-tongyong-zhankaibeifen1',
-    size: 20,
-    extraStyle: {
-      cursor: 'pointer'
-    },
-    onClick: function onClick() {
-      return setShowCaptions(!showCaptions);
-    }
-  })))), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles.main)
-  }, /*#__PURE__*/React.createElement(Header, {
-    title: headerTitle
-  }), /*#__PURE__*/React.createElement("div", {
+  }, showCaptions && /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://simg01.gaodunwangxiao.com/uploadfiles/tmp/upload/202508/08/f5b48_20250808145334.png",
+    alt: ""
+  })), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles.content, 'scrollBar'),
     ref: containerRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -1012,36 +995,43 @@ var AiExplain = function AiExplain(_ref) {
     className: styles.tips
   }, status === 5 ? t('aiDialogue.pleaseSpeak') : t('aiDialogue.listeningEllipsis')) : /*#__PURE__*/React.createElement("div", null, messageList.map(function (item) {
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles.item, _defineProperty({}, styles.answer, item.type === 'answer')),
+      className: classNames(styles.item, _defineProperty({}, styles.question, item.type !== 'answer')),
       key: item.id
-    }, item.content);
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.text
+    }, item.content));
   }), isTextLoading ? /*#__PURE__*/React.createElement(Spin, null) : null) : /*#__PURE__*/React.createElement("div", {
     className: styles.voiceWrap
-  }, /*#__PURE__*/React.createElement(LottieImg, {
-    name: status === 2 ? 'aiOutputStrengthen' : 'aiOutputNormal',
-    size: [242, 235]
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles.bottom
   }, /*#__PURE__*/React.createElement("div", {
+    className: styles.avatar
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://simg01.gaodunwangxiao.com/uploadfiles/tmp/upload/202508/08/f5b48_20250808145334.png",
+    alt: ""
+  })), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles.status, _defineProperty({}, styles.pointer, status === 2)),
     onClick: clickInterrupt
-  }, renderStatus), /*#__PURE__*/React.createElement("div", {
+  }, renderStatus)))), /*#__PURE__*/React.createElement("div", {
+    className: styles.bottom
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.btnWrap
   }, /*#__PURE__*/React.createElement(Tooltip, {
     zIndex: 10000,
-    placement: "top",
-    visible: showMuteTooltip,
-    onVisibleChange: setShowMuteTooltip,
-    content: audioEnabled ? t('aiDialogue.closeMic') : t('aiDialogue.openMic'),
+    placement: "bottom",
+    visible: showWordsTooltip,
+    onVisibleChange: setShowWordsTooltip,
+    content: showCaptions ? t('aiDialogue.closeCaptions') : t('aiDialogue.openCaptions'),
     overlayClassName: "ai-chat-tooltip"
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.btnItem, isDisable ? styles.disable : ''),
+    className: styles.btnItem
+  }, /*#__PURE__*/React.createElement(IconFontCom, {
+    type: !showCaptions ? 'icon-a-tongyong-zhankaibeifen1' : 'icon-tongyong-zhankaibeifen1',
+    size: 16,
+    extraStyle: {
+      cursor: 'pointer'
+    },
     onClick: function onClick() {
-      return handleVoice();
+      return setShowCaptions(!showCaptions);
     }
-  }, /*#__PURE__*/React.createElement(IconFontCom, {
-    type: audioEnabled ? 'icon-voice' : 'icon-a-voice1',
-    size: 34
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     zIndex: 10000,
     placement: "top",
@@ -1050,13 +1040,28 @@ var AiExplain = function AiExplain(_ref) {
     content: t('aiDialogue.hangUp'),
     overlayClassName: "ai-chat-tooltip"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.btnItem,
+    className: classNames(styles.btnItem, styles.hasBorder),
     onClick: function onClick() {
       return handleBack();
     }
   }, /*#__PURE__*/React.createElement(IconFontCom, {
     type: "icon-a-mti-guaduanshi",
-    size: 34
-  })))))))), document.body);
+    size: 18
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    zIndex: 10000,
+    placement: "top",
+    visible: showMuteTooltip,
+    onVisibleChange: setShowMuteTooltip,
+    content: audioEnabled ? t('aiDialogue.closeMic') : t('aiDialogue.openMic'),
+    overlayClassName: "ai-chat-tooltip"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.btnItem, isDisable ? styles.disable : ''),
+    onClick: function onClick() {
+      return handleVoice();
+    }
+  }, /*#__PURE__*/React.createElement(IconFontCom, {
+    type: audioEnabled ? 'icon-voice' : 'icon-a-voice1',
+    size: 18
+  }))))))), document.body);
 };
 export default AiExplain;

package/dist/components/ai-chat-dialogue/index.module copy.css

@@ -0,0 +1,230 @@
+@charset "UTF-8";
+.aiChat {
+  z-index: 9999;
+  position: fixed;
+  inset: 0;
+}
+.aiChat .bgImg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.aiChat .back {
+  position: absolute;
+  top: 30px;
+  left: 20px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px 0px rgba(153, 167, 191, 0.2);
+  border: 1px solid #ebf2ff;
+  cursor: pointer;
+}
+.aiChat .rightWrap {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+}
+.aiChat .rightWrap .iconWrap {
+  margin-right: 40px;
+}
+.aiChat .introWrap {
+  position: absolute;
+  top: 60px;
+  right: -420px;
+  width: 400px;
+  height: calc(100vh - 100px);
+  padding: 20px 20px 15px;
+  background: #f7faff;
+  box-shadow: -6px 2px 20px 0px rgba(153, 167, 191, 0.15);
+  border-radius: 12px;
+  z-index: 2;
+  transition: all 0.3s ease;
+}
+.aiChat .introWrap.block {
+  right: 20px;
+}
+.aiChat .introWrap .loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 80%;
+  text-align: center;
+}
+.aiChat .introWrap .introHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.aiChat .introWrap .introHeader .title {
+  font-size: 18px;
+  font-weight: 600;
+}
+.aiChat .introWrap .introContent {
+  height: calc(100% - 60px);
+  overflow-y: scroll;
+  padding-right: 10px;
+}
+.aiChat .main {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+}
+.aiChat .main.translate {
+  transform: translateX(-160px);
+}
+.aiChat .main .content {
+  height: calc(100% - 380px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.aiChat .main .content .container {
+  width: 800px;
+  margin: 0 auto;
+  height: 100%;
+}
+.aiChat .main .header {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+  height: 26px;
+}
+.aiChat .main .header .logo {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.aiChat .main .header .title {
+  font-size: 18px;
+  text-align: center;
+}
+.aiChat .main .tips {
+  font-weight: 400;
+  color: #54698c;
+  font-size: 17px;
+}
+.aiChat .main .item {
+  margin-bottom: 10px;
+  font-weight: 400;
+  color: #333;
+  font-size: 17px;
+  line-height: 28px;
+  word-break: break-all;
+  /* 强制换行 */
+  overflow-wrap: break-word;
+  /* 在适当位置换行 */
+  white-space: pre-wrap;
+}
+.aiChat .main .item.answer {
+  font-size: 16;
+  color: #b0b0b0;
+}
+.aiChat .main .voiceWrap {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.aiChat .main .bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+.aiChat .main .bottom .pointer {
+  cursor: pointer;
+}
+.aiChat .main .bottom .status {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  margin-bottom: 30px;
+}
+.aiChat .main .bottom .status .iconOutside {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid #000000;
+  border-radius: 50%;
+}
+.aiChat .main .bottom .status .iconInside {
+  width: 13px;
+  height: 13px;
+  background-color: #000000;
+}
+.aiChat .main .bottom .status .statusImg {
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  margin: 0 auto;
+  margin-bottom: 15px;
+}
+.aiChat .main .bottom .status .statusText {
+  font-size: 16px;
+  color: #7d91b3;
+}
+.aiChat .main .bottom .status .statusText.danger {
+  color: red;
+}
+.aiChat .main .bottom .btnWrap {
+  display: flex;
+  justify-content: center;
+}
+.aiChat .main .bottom .btnWrap .btnItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 76px;
+  height: 76px;
+  border-radius: 50%;
+  margin-right: 118px;
+  background: #ffffff;
+  box-shadow: 0px 2px 10px 0px rgba(153, 167, 191, 0.1);
+  cursor: pointer;
+}
+.aiChat .main .bottom .btnWrap .btnItem.disable {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.aiChat .main .bottom .btnWrap .btnItem:last-child {
+  margin-right: 0;
+}
+
+:global .out-tooltip .ant-tooltip-content .ant-tooltip-arrow {
+  left: 55px;
+}
+:global .ai-chat-tooltip {
+  z-index: 100000 !important;
+}
+
+:global(.ant-message) {
+  position: fixed !important;
+  z-index: 99999999 !important;
+}
+
+.disable {
+  opacity: 0.4;
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/dist/components/ai-chat-dialogue/index.module.css

@@ -3,115 +3,40 @@
   z-index: 9999;
   position: fixed;
   inset: 0;
+  background: rgba(0, 0, 0, 0.08);
 }
-.aiChat .bgImg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.aiChat .back {
-  position: absolute;
-  top: 30px;
-  left: 20px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow: 0px 0px 10px 0px rgba(153, 167, 191, 0.2);
-  border: 1px solid #ebf2ff;
-  cursor: pointer;
-}
-.aiChat .rightWrap {
-  position: absolute;
-  right: 20px;
-  top: 30px;
-  z-index: 3;
-  display: flex;
-  align-items: center;
-}
-.aiChat .rightWrap .iconWrap {
-  margin-right: 40px;
-}
-.aiChat .introWrap {
+.aiChat .main {
   position: absolute;
-  top: 60px;
-  right: -420px;
-  width: 400px;
-  height: calc(100vh - 100px);
-  padding: 20px 20px 15px;
-  background: #f7faff;
-  box-shadow: -6px 2px 20px 0px rgba(153, 167, 191, 0.15);
-  border-radius: 12px;
-  z-index: 2;
-  transition: all 0.3s ease;
-}
-.aiChat .introWrap.block {
-  right: 20px;
-}
-.aiChat .introWrap .loading {
+  right: 30px;
+  top: 80px;
+  width: 280px;
+  height: 400px;
+  padding: 56px 20px 40px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  height: 80%;
-  text-align: center;
-}
-.aiChat .introWrap .introHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-.aiChat .introWrap .introHeader .title {
-  font-size: 18px;
-  font-weight: 600;
+  border-radius: 16px;
+  border: 1px solid #E9EBF2;
+  background: #F5F7FA;
+  box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
 }
-.aiChat .introWrap .introContent {
-  height: calc(100% - 60px);
-  overflow-y: scroll;
-  padding-right: 10px;
-}
-.aiChat .main {
-  position: relative;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.3s ease;
+.aiChat .main .title {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
 }
-.aiChat .main.translate {
-  transform: translateX(-160px);
+.aiChat .main .title img {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
 }
 .aiChat .main .content {
-  height: calc(100% - 380px);
+  height: 260px;
   overflow-y: scroll;
   overflow-x: hidden;
-}
-.aiChat .main .content .container {
-  width: 800px;
-  margin: 0 auto;
-  height: 100%;
-}
-.aiChat .main .header {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 30px;
-  height: 26px;
-}
-.aiChat .main .header .logo {
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-  flex-shrink: 0;
-  margin-top: 3px;
-}
-.aiChat .main .header .title {
-  font-size: 18px;
-  text-align: center;
+  padding-bottom: 10px;
 }
 .aiChat .main .tips {
   font-weight: 400;
@@ -120,45 +45,50 @@
 }
 .aiChat .main .item {
   margin-bottom: 10px;
-  font-weight: 400;
-  color: #333;
-  font-size: 17px;
-  line-height: 28px;
+  color: #4C5A70;
+  font-size: 14px;
   word-break: break-all;
   /* 强制换行 */
   overflow-wrap: break-word;
   /* 在适当位置换行 */
   white-space: pre-wrap;
 }
-.aiChat .main .item.answer {
-  font-size: 16;
-  color: #b0b0b0;
+.aiChat .main .item.question {
+  display: flex;
+  flex-direction: column;
+}
+.aiChat .main .item.question .text {
+  display: inline-block;
+  align-self: flex-end;
+  max-width: 220px;
+  padding: 10px 16px;
+  color: #2E394C;
+  border-radius: 12px;
+  background: #E9EBF2;
 }
 .aiChat .main .voiceWrap {
   height: 100%;
-  display: flex;
-  align-items: center;
-}
-.aiChat .main .bottom {
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: absolute;
-  bottom: 60px;
-  left: 50%;
-  transform: translateX(-50%);
-  text-align: center;
+  margin-top: 4px;
 }
-.aiChat .main .bottom .pointer {
-  cursor: pointer;
+.aiChat .main .voiceWrap .avatar {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 24px;
 }
-.aiChat .main .bottom .status {
+.aiChat .main .voiceWrap .avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.aiChat .main .status {
   display: flex;
   flex-direction: column;
-  width: 220px;
-  margin-bottom: 30px;
 }
-.aiChat .main .bottom .status .iconOutside {
+.aiChat .main .status .iconOutside {
   width: 30px;
   height: 30px;
   display: flex;
@@ -167,48 +97,60 @@
   border: 3px solid #000000;
   border-radius: 50%;
 }
-.aiChat .main .bottom .status .iconInside {
+.aiChat .main .status .iconInside {
   width: 13px;
   height: 13px;
   background-color: #000000;
 }
-.aiChat .main .bottom .status .statusImg {
+.aiChat .main .status .statusImg {
   width: 24px;
   height: 24px;
   border-radius: 8px;
   margin: 0 auto;
   margin-bottom: 15px;
 }
-.aiChat .main .bottom .status .statusText {
+.aiChat .main .status .statusText {
   font-size: 16px;
   color: #7d91b3;
 }
-.aiChat .main .bottom .status .statusText.danger {
+.aiChat .main .status .statusText.danger {
   color: red;
 }
-.aiChat .main .bottom .btnWrap {
+.aiChat .bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+.aiChat .bottom .pointer {
+  cursor: pointer;
+}
+.aiChat .bottom .btnWrap {
   display: flex;
   justify-content: center;
+  gap: 36px;
 }
-.aiChat .main .bottom .btnWrap .btnItem {
+.aiChat .bottom .btnWrap .btnItem {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 76px;
-  height: 76px;
-  border-radius: 50%;
-  margin-right: 118px;
-  background: #ffffff;
-  box-shadow: 0px 2px 10px 0px rgba(153, 167, 191, 0.1);
+  width: 32px;
+  height: 32px;
   cursor: pointer;
 }
-.aiChat .main .bottom .btnWrap .btnItem.disable {
+.aiChat .bottom .btnWrap .btnItem.disable {
   pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
 }
-.aiChat .main .bottom .btnWrap .btnItem:last-child {
-  margin-right: 0;
+.aiChat .bottom .btnWrap .btnItem.hasBorder {
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0px 2px 10px 0px rgba(153, 167, 191, 0.1);
 }
 
 :global .out-tooltip .ant-tooltip-content .ant-tooltip-arrow {

package/dist/components/chat-input/index.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { FileItem } from "../../types/file";
+import { AgentConfig } from "../../types/chat";
 export interface ChatInputRef {
     getValue: () => string;
     setValue: (value: string) => void;
@@ -41,6 +42,9 @@ interface IAIInputProps {
     };
     onFileUploaded?: (file: FileItem) => void;
     onValueChange?: (value: string) => void;
+    renderSendButton?: (defaultBtn: React.ReactNode) => React.ReactNode;
+    agentList?: AgentConfig[];
+    onAgentChange?: (agentId: number) => void;
 }
 declare const ChatInput: React.ForwardRefExoticComponent<IAIInputProps & React.RefAttributes<ChatInputRef>>;
 export default ChatInput;