yt-chat-components 1.4.7 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

package/public/index.html

@@ -116,13 +116,14 @@
         is-show-side-right=false
         is-show-side-left=true
         dialog-index="999999999"
-        agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"
+        agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/byz/xinge.png"
         agent-name="白城医学高等专科学校招生咨询平台"
         logo-width="27px"
         logo-font-size="20px"
         is-title-side-icon=true
         is-show-upload-button=false
         drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
+        banner-map='{"a":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png","b":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png","c":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png"}'
 />
 </body>
 </html>

package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx

@@ -405,12 +405,20 @@ export default function ChatMessage({
         </div>,
         footer: <div key={id} className="msg_operateBox">
           {isShowReadIcon && <img src={isPlay ? playRunGif : playPng} onClick={() => playVoice(message)}/>}
-          <img src={copyPng} onClick={() => copyText(message)} />
+          <img src={copyPng} onClick={() => copyText(message)}/>
+          <div style={{
+            fontSize: 10,
+            color: '#a3a3a3',
+            bottom: 6,
+            width: '100%',
+            marginLeft:'4px',
+          }}>内容由AI生成，无法保证真实准确，仅供参考
+          </div>
         </div>
       };
       return resultItem
     });
-    return <CustomThoughtChain items={items} size={'small'} />
+    return <CustomThoughtChain items={items} size={'small'}/>
   }
 
   const renderBotFormMessage = (form_config) => {

package/src/YtChatView/chatWidget/chatWindow/index.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import {extractMessageFromOutput} from './utils';
-import React, {Context, useEffect, useRef, useState} from 'react';
+import React, {Context, useCallback, useEffect, useRef, useState} from 'react';
 import {ChatMessageType, embedAppExtend, InputValueType, MessageItem, MessageType} from './types/chatWidget';
 import ChatMessage from './chatMessage';
 import {fetchUploadFile, getChatHistory, sendMessage} from './controllers';
@@ -27,6 +27,7 @@ import CallInterface from './callInterface/index.tsx';
 import {Image, message as messageTip, Tooltip, Typography} from 'antd';
 import {isEmpty, isFunction} from 'lodash';
 import btn_answer from '../../../assets/aicenter/btn_answer.png';
+import {MethodContext} from "../../previewDialogV2";
 
 
 let mediaRecorder = null; // 语音对象,用于录音
@@ -88,7 +89,6 @@ export default function ChatWindow({
   isShowReadIcon,
   renderCustomDropDown,
   isTagsHidden,
-  MethodContext
 }: {
   is_enable_call:boolean;
   tags: [];
@@ -138,7 +138,6 @@ export default function ChatWindow({
   isShowReadIcon?:boolean;
   renderCustomDropDown?: Function;
   isTagsHidden?: boolean;
-  MethodContext?:Context<any>;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const lastMessage = useRef<HTMLDivElement>(null);
@@ -148,6 +147,7 @@ export default function ChatWindow({
   /* Initial listener for loss of focus that refocuses User input after a small delay */
   const [nowAIContentList, setNowAIContentList] = useState<Array<MessageItem>>([]);
   const [receivingMessage, setReceivingMessage] = useState(false);
+  const receivingMessageRef = useRef(receivingMessage);
   const abortControllerRef = useRef(new AbortController());
   const [fileList, setFileList] = useState<
     { file: File; fileUrl: string; fileType: string; fileId: string }[]
@@ -159,12 +159,12 @@ export default function ChatWindow({
   const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
   const [tagList, setTagList] = useState([]); // 问题标签列表
   const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
-  const [inputContainerHeight, setInputContainerHeight] = useState('50px')
+  const [inputContainerHeight, setInputContainerHeight] = useState('120px')
   let content_id: string = null
   let content_ns: string = null
   let event_latest: string = null
   const nowAIContentListRef = useRef(nowAIContentList);
-  const { callDMethod } = React.useContext(MethodContext);
+  const {registerChatMethods} = React.useContext(MethodContext);
   let voiceChunks = []; // 临时存储录制的语音片段
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
   const handleScroll = () => {
@@ -957,10 +957,14 @@ export default function ChatWindow({
   }, [sessionId]);
 
   useEffect(() => {
-    if (callDMethod) {
-      callDMethod(handleSendMessage);
+    console.log("registerChatMethods",registerChatMethods)
+    if (registerChatMethods) {
+      registerChatMethods({
+        isActiveMessage,
+        handleSendMessage,
+      })
     }
-  }, [callDMethod]);
+  }, [registerChatMethods]);
 
   /**
    * 开场白展示优化
@@ -979,6 +983,15 @@ export default function ChatWindow({
     }
     return 'cl-drop-horizontal'
   }
+  useEffect(() => {
+    receivingMessageRef.current = receivingMessage;
+  }, [receivingMessage]);
+  /**
+   * 对话是否处于活跃状态
+   * */
+  const isActiveMessage = useCallback(() => {
+    return !!receivingMessageRef.current;
+  }, []);
 
   const renderTipsInfo = () => {
     if (isFunction(renderCustomDropDown)) {
@@ -1176,9 +1189,9 @@ export default function ChatWindow({
       </div>
       <div className="w_inputBox" style={{height: inputContainerHeight}}>
             <textarea
-                onFocus={() => setInputContainerHeight('120px')}
+                // onFocus={() => setInputContainerHeight('120px')}
                 maxLength={5000}
-                onBlur={() => setTimeout(() => setInputContainerHeight('50px'), 200)}
+                // onBlur={() => setTimeout(() => setInputContainerHeight('50px'), 200)}
                 // value={inputValue}
                 onChange={(e) => setValue(e.target.value)}
                 onKeyDown={(e) => {
@@ -1271,10 +1284,7 @@ export default function ChatWindow({
     }
     if(isTagsHidden){
       return inputNode;
-    }else{
-
     }
-
     return (
         <>
           <div

package/src/YtChatView/chatWidget/index.tsx

@@ -52,7 +52,6 @@ export default function ChatWidget({
   isShowReadIcon,
   renderCustomDropDown,
   isTagsHidden,
-                                     MethodContext
 }: {
   is_enable_call:boolean,
   tags: [];
@@ -98,7 +97,6 @@ export default function ChatWidget({
   isShowReadIcon: boolean,
   renderCustomDropDown: Function,
   isTagsHidden: boolean;
-  MethodContext: Context<any>;
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -124,7 +122,6 @@ export default function ChatWidget({
   return (
     <div style={{ position: 'relative',height:'100%' }}>
       <style dangerouslySetInnerHTML={{ __html: styles + markdownBody + yt_style + customThoughtChainStyle +  cardStyle }}></style>
-      <div style={{fontSize: 10, color: '#a3a3a3', position: 'absolute', bottom: 6, width: '100%', display: 'flex', justifyContent: 'center'}}>内容由AI生成，无法保证真实准确，仅供参考</div>
       <ChatWindow
         is_enable_call={is_enable_call}
         tags={tags}
@@ -176,7 +173,6 @@ export default function ChatWidget({
         isShowReadIcon={isShowReadIcon}
         renderCustomDropDown={renderCustomDropDown}
         isTagsHidden={isTagsHidden}
-        MethodContext={MethodContext}
       />
     </div>
   );

package/src/YtChatView/chatWidget/style.js

@@ -254,8 +254,7 @@ video {
 
 .cl-window {
   border-radius: 1rem;
-  padding-top: 1.8rem;
-  padding-bottom: 1.2rem;
+  padding-top: 1.7rem;
 }
 
 .cl-middle-container{
@@ -263,10 +262,10 @@ video {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border-left:0.5px solid #3850FF2E;
-  border-right:0.5px solid #3850FF2E;
-  padding-left:1.6rem;
-  padding-right:1.6rem;
+  // border-left:0.5px solid #3850FF2E;
+  // border-right:0.5px solid #3850FF2E;
+  // padding-left:0.4rem;
+  // padding-right:0.4rem;
 }
 
 
@@ -2415,7 +2414,7 @@ export const yt_style = `
   display: flex;
   align-items: center;
   box-shadow: 0px 2px 15px 0px rgba(0,48,187,0.1);
-  border-radius: 30px;
+  border-radius: 11px;
   background: #FFFFFF;
   transition: height 0.2s ease;
 }

package/src/YtChatView/components/TabSelector/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Tabs, Button, Typography } from 'antd';
+import { Tabs, Button, Typography, ConfigProvider } from 'antd';
 import { LeftOutlined, RightOutlined, SyncOutlined } from '@ant-design/icons';
 import styles from './index.module.css';
 
@@ -18,19 +18,15 @@ const defaultMap = {
 
 const TabSelector = ({ map = defaultMap, customUrl, handleRowClick, welcomeWords, isSimple }) => {
     const [activeKey, setActiveKey] = useState(Object.keys(map)[0]);
-    const [tabPage, setTabPage] = useState(0);
     const [valuePage, setValuePage] = useState(0);
-    const tabsPerPage = isSimple ? 3 : 4; // Number of tabs to show per page
+    const [tabLocation, setTabLocation] = useState(0);
     const valuesPerPage = 5; // Number of values to show per page
     const [pageLoading, setPageLoading] = useState(false);
+    const keyShowSize = isSimple ? 2 : 4;
 
     const keys = Object.keys(map);
     const values = map[activeKey] || [];
 
-    // Calculate visible tabs for current page
-    const visibleTabs = keys.slice(tabPage * tabsPerPage, (tabPage + 1) * tabsPerPage);
-
-    // Calculate visible values for current page
     const visibleValues = isSimple ? values : values.slice(valuePage * valuesPerPage, (valuePage + 1) * valuesPerPage);
 
     const handleTabChange = (key) => {
@@ -39,24 +35,14 @@ const TabSelector = ({ map = defaultMap, customUrl, handleRowClick, welcomeWords
     };
 
     const handleTabPrev = () => {
-        setTabPage((prev) => {
-            const maxPage = Math.ceil(keys.length / tabsPerPage) - 1;
-            return prev > 0 ? prev - 1 : maxPage;
-        });
-        // Ensure activeKey is within visible tabs
-        if ( !visibleTabs.includes(activeKey)) {
-            setActiveKey(visibleTabs[0]);
+        if(tabLocation!==0){
+            setTabLocation(tabLocation - 1)
         }
     };
 
     const handleTabNext = () => {
-        setTabPage((prev) => {
-            const maxPage = Math.ceil(keys.length / tabsPerPage) - 1;
-            return prev < maxPage ? prev + 1 : 0;
-        });
-        // Ensure activeKey is within visible tabs
-        if ( !visibleTabs.includes(activeKey)) {
-            setActiveKey(visibleTabs[0]);
+        if (tabLocation !== keys.length - keyShowSize) {
+            setTabLocation(tabLocation + 1)
         }
     };
 
@@ -72,6 +58,13 @@ const TabSelector = ({ map = defaultMap, customUrl, handleRowClick, welcomeWords
     };
 
     return (
+        <ConfigProvider theme={{
+            components: {
+                Tabs: {
+                    horizontalItemGutter:48,
+                }
+            }
+        }}>
         <div className={styles.mainContainer} style={{ marginLeft: isSimple ? "0" : '24px' }}>
             {
                 welcomeWords && <div className={styles.welcome}>{welcomeWords}</div>
@@ -100,37 +93,54 @@ const TabSelector = ({ map = defaultMap, customUrl, handleRowClick, welcomeWords
                          style={{ paddingLeft: isSimple ? "0" : '20px', paddingRight: isSimple ? "0" : '20px' }}
                     >
                         <LeftOutlined className={styles.leftArrow} onClick={handleTabPrev}
-                                      style={{ marginBottom: isSimple ? "0" : '14px' }}/>
+                                      style={{
+                                          marginBottom: isSimple ? "0" : '14px',
+                                          marginRight: isSimple ? "0" : '12px',
+                                          cursor: tabLocation === 0 ? 'not-allowed' : 'pointer'
+                                      }}
+                        />
                         {
                             isSimple ? (
                                     <div className={styles.simpleHeader}>
-                                        {visibleTabs.map(key => <div
+                                        {keys
+                                            .slice(tabLocation, tabLocation + keyShowSize)
+                                            .map(key => <div
                                             className={styles.simplyRow}
                                             style={{
                                                 background: key === activeKey ? "#1974FF" : "#FFFFFF",
                                                 color: key === activeKey ? "#FFFFFF" : "#A4A4A4",
                                                 border:key === activeKey ? "unset" : "1px solid #E4E4E4",
+                                                transform: 'translate3d(0px, 0px, 0px)'
                                             }}
                                             onClick={()=>handleTabChange(key)}
                                         >{key}</div>)}
                                     </div>
                                 )
                                 :
-                                <Tabs activeKey={activeKey} onChange={handleTabChange}>
-                                    {visibleTabs.map((key) => (
+                                <Tabs activeKey={activeKey} onChange={handleTabChange} className={styles.headerTabs} horizontalItemGutter={40}>
+                                    {keys
+                                        .slice(tabLocation, tabLocation + keyShowSize)
+                                        .map((key) => (
                                         <Tabs.TabPane tab={key} key={key}/>
                                     ))}
                                 </Tabs>
                         }
-                        <RightOutlined className={styles.rightArrow} onClick={handleTabNext}
-                                       style={{ marginBottom: isSimple ? "0" : '14px' }}/>
+                        <RightOutlined
+                            className={styles.rightArrow}
+                            onClick={handleTabNext}
+                                       style={{
+                                           marginBottom: isSimple ? "0" : '14px',
+                                           marginLeft: isSimple ? "0" : '12px',
+                                           cursor: tabLocation === keys.length - keyShowSize ? 'not-allowed' : 'pointer'
+                                       }}
+                        />
                     </div>
                     <div className={styles.valueList}>
                         {visibleValues.map((item, index) => (
                             <div className={styles.row} key={index} onClick={() => handleRowClick(item)}>
                                 <Typography.Paragraph
                                     className={styles.text}
-                                    style={{ maxWidth: isSimple ? '300px' : '400px' }}
+                                    style={{ maxWidth: isSimple ? '210px' : '300px' }}
                                     ellipsis={{ rows: 1, tooltip: `${item}`, }}><span
                                     style={{ marginRight: '12px' }}>·</span>{item}
                                 </Typography.Paragraph>
@@ -146,6 +156,7 @@ const TabSelector = ({ map = defaultMap, customUrl, handleRowClick, welcomeWords
                 </div>
             </div>
         </div>
+        </ConfigProvider>
     );
 };
 

package/src/YtChatView/components/TabSelector/index.module.css

@@ -75,6 +75,10 @@
             color: #1974FF;
         }
 
+        .headerTabs{
+            width: 100%;
+        }
+
         .simpleHeader{
             display: flex;
             justify-content: space-evenly;
@@ -97,6 +101,8 @@
         font-size: 16px;
         color: #000000;
         overflow-y: auto;
+        scrollbar-width: thin !important;
+        scrollbar-color: #ced4e3 transparent;
 
         .row {
             padding: 8px 12px;
@@ -104,7 +110,6 @@
             align-items: center;
             justify-content: space-between;
             cursor: pointer;
-            margin-bottom: 4px;
             .text{
                 font-size: 16px;
                 margin-bottom: 0;

package/src/YtChatView/previewDialogV2/index.jsx

@@ -5,8 +5,8 @@ import { getFlowInfo, getHistoryList } from '../chatWidget/chatWindow/controller
 import './index.module.css'
 import { v4 as uuidv4 } from 'uuid';
 import historyListEmptyPng from '../../assets/aicenter/history-list-empty.png';
-import { isEmpty } from "lodash";
-import { Carousel, message as messageTip, Progress, Skeleton, Tooltip } from 'antd'
+import { isEmpty, isFunction } from "lodash";
+import { Carousel, message, message as messageTip, Progress, Skeleton, Tooltip } from 'antd'
 import Icon, { HistoryOutlined, PlusOutlined } from "@ant-design/icons";
 import TabSelector from "../components/TabSelector";
 
@@ -24,11 +24,12 @@ const CommentIcon = (props) => (
 );
 
 const contentStyle = {
-  height: '160px',
+  width:'100%',
   color: '#fff',
   lineHeight: '160px',
   textAlign: 'center',
   background: '#364d79',
+  borderRadius:'11px',
 };
 
 const style = `
@@ -46,22 +47,24 @@ const style = `
 .p_toolDialog .p_sign{
   width: calc(100vw - 140px);
   margin: 0 auto;
+  min-width: 1200px;
 }
 
 .dialog_box{
-              margin: 24px auto 0;
-              width: calc(100vw - 140px);
-              height: calc(100vh - 200px);
-              background: #fff;
-              border-radius: 15px;
-              display: flex;
-              flex-direction: column;
+  margin: 24px auto 0;
+  width: calc(100vw - 140px);
+  height: calc(100vh - 200px);
+  background: #fff;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  min-width: 1200px;
 }
 .p_toolDialog .p_toolLeft {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 400px;
+  width: 300px;
   padding: 1.7rem 1.6rem 1.7rem 1.6rem;
   
   border-top-left-radius: 8px;
@@ -80,6 +83,9 @@ const style = `
 
 .p_toolDialog .dialog_box .p_toolLogo .p_logoImg {
   width: 48px;
+   position: absolute;
+   top: 2px;
+   transform: scale3d(1.3, 1.3, 1.3);
 }
 
 .p_toolDialog .dialog_box .p_toolLogo .p_logoText {
@@ -103,7 +109,7 @@ const style = `
   border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
   backdrop-filter: blur(10px);
   position: relative;
-  max-height:calc(100% - 5.5rem - 60px);
+  max-height:calc(100% - 60px);
 }
 
 .p_toolDialog .p_toolLeft .p_historyDialog ::-webkit-scrollbar-thumb {
@@ -140,12 +146,12 @@ const style = `
   text-align: center;
   font-size: 12px;
   color: #999999;
-  max-height: calc(100% - 3rem);
+  max-height: calc(100% - 1.7rem);
 
 }
 
 .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
-  height: calc(100% - 3rem);
+  height: calc(100% - 1.7rem);
   margin-top: 10px;
   overflow-y: auto;
   scrollbar-width: none !important; /* firefox */
@@ -192,15 +198,15 @@ const style = `
 
 .p_toolDialog .p_toolRight {
   flex: 1;
-  background: #F0F0F0;
+  background: #f5f5f5;h
 }
 
 .p_toolRightToRight {
   height:100%;
-  width:400px;
+  width:300px;
   display:flex;
   flex-direction:column;
-  padding:2rem 1.6rem 1.8rem 1.6rem
+  padding:1.7rem 1.6rem 1.8rem 1.6rem
 }
 .p_toolRightToRight .p_hot{
   display:flex;
@@ -226,13 +232,20 @@ const style = `
 .p_toolRightToRight  .p_carousel .slick-dots-bottom{
     justify-content: end;
     right:12px;
+    bottom:-10px;
+}
+:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li.slick-active::after{
+  background:#1974FF;
+}
+
+:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li button{
+  background: #000000;
 }
 
 .p_newDialog {
-  width: 352px;
+  width: 252px;
   height: 40px;
   min-height:40px;
-  margin-top: 20px;
   cursor: pointer;
   display: flex;
   color:#0060FF;
@@ -276,7 +289,7 @@ const defaultList = [
 
 const api_key = 'sk-mniUFDpcWwvNF3iFzssXa6etN-S_Y4AApyHYcBU44L0';
 
-const MethodContext = React.createContext();
+export const MethodContext = React.createContext();
 
 export class ToolDialogV2 extends React.Component {
 
@@ -342,13 +355,18 @@ export class ToolDialogV2 extends React.Component {
     this.setState({ sessionId });
   };
 
-  callDMethod = (method) => {
-    this.handleSendMessage = method;
-  };
+  registerChatMethods = ({ isActiveMessage, handleSendMessage }) => {
+    this.handleSendMessage = handleSendMessage;
+    this.isActiveMessage = isActiveMessage;
+  }
+
 
   handleClick = (word) => {
-    if (typeof this.handleSendMessage === 'function') {
+    if(!this.isActiveMessage()){
       this.handleSendMessage(word);
+    }else{
+      message.destroy();
+      message.info("请等待回复结束后再发送")
     }
   };
 
@@ -368,9 +386,12 @@ export class ToolDialogV2 extends React.Component {
     const { title } = this.props;
     const { currentFlow } = this.state;
     return <TabSelector handleRowClick={(word)=> {
-      this.setState({ dropDownList: [] });
-      if (typeof this.handleSendMessage === 'function') {
+      if(!this.isActiveMessage()){
+        this.setState({ dropDownList: [] });
         this.handleSendMessage(word);
+      }else{
+        message.destroy();
+        message.info("请等待回复结束后再发送")
       }
     }} welcomeWords={`Hi，欢迎使用${currentFlow.name||title}，您可以这样问我:`}/>
   }
@@ -397,6 +418,7 @@ export class ToolDialogV2 extends React.Component {
       modalWidth,
       isShowReadIcon = false,
       signUrl,
+      bannerMap,
     } = this.props;
     const { currentFlow = {} } = this.state;
     return (
@@ -409,7 +431,17 @@ export class ToolDialogV2 extends React.Component {
             </div>
             <div className={"dialog_box"}>
               <div className="p_toolLogo">
-                <img className="p_logoImg" style={{ width: logoWidth, borderRadius: 15 }} src={agentUrl}/>
+                <div style={{
+                  width: logoWidth,
+                  height: logoWidth,
+                  backgroundColor: '#1974FF',
+                  borderRadius: '22px',
+                  position: 'relative',
+                  overflow: 'hidden',
+                }}>
+                  <img className="p_logoImg"
+                        src={agentUrl}/>
+                </div>
                 <div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
               </div>
               <div style={{display: 'flex',flexDirection:"row",flex: 1,height: 'calc(100% - 75px)'}}>
@@ -456,7 +488,7 @@ export class ToolDialogV2 extends React.Component {
                     </div>
                 }
                 <div className="p_toolRight">
-                  <MethodContext.Provider value={{ callDMethod: this.callDMethod   }}>
+                  <MethodContext.Provider value={{registerChatMethods:this.registerChatMethods}}>
                   <ChatWidget
                       window_title={currentFlow?.name || title}
                       flow_id={currentFlow?.id || flowId}
@@ -477,27 +509,21 @@ export class ToolDialogV2 extends React.Component {
                       isShowChatHeader={false}
                       renderCustomDropDown={this.renderCustomDropDown}
                       isTagsHidden={true}
-                      MethodContext={MethodContext}
                       placeholder={'请输入您想咨询的问题'}
                   />
                   </MethodContext.Provider>
                 </div>
                 <div className={'p_toolRightToRight'}>
                   <Carousel autoplay={{ dotDuration: true }} autoplaySpeed={4000} className={'p_carousel'}>
-                    <div>
-                      <h3 style={contentStyle}>1</h3>
-                    </div>
-                    <div>
-                      <h3 style={contentStyle}>2</h3>
-                    </div>
-                    <div>
-                      <h3 style={contentStyle}>3</h3>
-                    </div>
-                    <div>
-                      <h3 style={contentStyle}>4</h3>
-                    </div>
+                    {
+                      Object.values(bannerMap).map(item => (
+                        <div key={item}>
+                          <img style={contentStyle} src={item}/>
+                        </div>
+                      ))
+                    }
                   </Carousel>
-                  <div style={{ height: '1px', background: '#E5E5E5',marginTop: '30px' }}/>
+                  <div style={{ height: '1px', background: '#E5E5E5',marginTop: '25px' }}/>
                   <div className={'p_hot'}>
                     <img src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/hot.png'}/>
                     <span>热点问题</span>

package/src/YtChatView/previewDialogV2/index.module.css

@@ -1,20 +1,22 @@
-.p_closeImg {
+.closeImg {
   width: 14px;
   cursor: pointer;
 }
 
-.p_toolDialog {
-  height:100%;
-  border-radius:8px;
+.toolDialog {
+  height: 100%;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
 }
-.p_toolDialog .p_sign{
+
+.toolDialogSign {
   width: calc(100vw - 140px);
   margin: 0 auto;
+  min-width: 1200px;
 }
 
-.dialog_box{
+.dialogBox {
   margin: 24px auto 0;
   width: calc(100vw - 140px);
   height: calc(100vh - 200px);
@@ -22,43 +24,46 @@
   border-radius: 15px;
   display: flex;
   flex-direction: column;
+  min-width: 1200px;
 }
-.p_toolDialog .p_toolLeft {
+
+.toolLeft {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 400px;
+  width: 300px;
   padding: 1.7rem 1.6rem 1.7rem 1.6rem;
-
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
 }
 
-.p_toolDialog .dialog_box .p_toolLogo {
+.toolLogo {
   user-select: none;
   display: flex;
   align-items: center;
   margin-top: 18px;
   padding-left: 32px;
-  padding-bottom:12px;
+  padding-bottom: 12px;
   border-bottom: #E5E5E5 solid 1px;
 }
 
-.p_toolDialog .dialog_box .p_toolLogo .p_logoImg {
+.logoImg {
   width: 48px;
+  position: absolute;
+  top: 2px;
+  transform: scale3d(1.3, 1.3, 1.3);
 }
 
-.p_toolDialog .dialog_box .p_toolLogo .p_logoText {
+.logoText {
   font-weight: bold;
   margin-left: 10px;
   font-size: 20px;
-  background: #000000;
-/*background: linear-gradient(to right, #1551FF, #8F4BFF);*/
+  /* background: linear-gradient(to right, #1551FF, #8F4BFF); */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog {
+.historyDialog {
   user-select: none;
   margin-top: 20px;
   margin-bottom: 20px;
@@ -69,36 +74,30 @@
   border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
   backdrop-filter: blur(10px);
   position: relative;
-  max-height:calc(100% - 5.5rem - 60px);
+  max-height: calc(100% - 60px);
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-  background: #535353 !important;
-}
-
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle {
+.historyTitle {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_historyImg {
+.historyImg {
   width: 25px;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_dialogTitle {
+.dialogTitle {
   font-size: 18px;
   line-height: 16px;
   text-align: left;
   font-style: normal;
-  display:flex;
+  display: flex;
   font-weight: normal;
   color: #A4A4A4;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyListEmpty {
+.historyListEmpty {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -106,47 +105,46 @@
   text-align: center;
   font-size: 12px;
   color: #999999;
-  max-height: calc(100% - 3rem);
-
+  max-height: calc(100% - 1.7rem);
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
-  height: calc(100% - 3rem);
+.historyList {
+  height: calc(100% - 1.7rem);
   margin-top: 10px;
   overflow-y: auto;
-  scrollbar-width: none !important; /* firefox */
+  scrollbar-width: none !important;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList::-webkit-scrollbar{
-  display:none;
+.historyList::-webkit-scrollbar {
+  display: none;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList:hover {
-  scrollbar-width: thin !important; /* firefox */
+.historyList:hover {
+  scrollbar-width: thin !important;
   scrollbar-color: #ced4e3 transparent;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem {
+.historyItem {
   padding: 10px 16px;
   padding-left: 0;
-  margin-bottom:4px;
+  margin-bottom: 4px;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem:hover{
+.historyItem:hover {
   background: #F5F5F5;
   border-radius: 9px;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem:hover .p_historyName{
-  color: #1552FF
+.historyItem:hover .historyName {
+  color: #1552FF;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_activeItem{
+.activeItem {
   background: #F5F5F5;
   border-radius: 9px;
 }
 
-.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName {
+.historyName {
   color: #333333;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -156,70 +154,79 @@
   align-items: center;
 }
 
-.p_toolDialog .p_toolRight {
+.toolRight {
   flex: 1;
-  background: #F0F0F0;
+  background: #f5f5f5;
 }
 
-.p_toolRightToRight {
-  height:100%;
-  width:400px;
-  display:flex;
-  flex-direction:column;
-  padding:2rem 1.6rem 1.8rem 1.6rem
+.toolRightToRight {
+  height: 100%;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 1.7rem 1.6rem 1.8rem 1.6rem;
 }
-.p_toolRightToRight .p_hot{
-  display:flex;
+
+.hot {
+  display: flex;
   align-items: center;
 }
 
-.p_toolRightToRight .p_hot img{
-  width:19px;
-  margin-right:10px;
+.hot img {
+  width: 19px;
+  margin-right: 10px;
 }
 
-.p_toolRightToRight .p_hot span{
+.hot span {
   font-size: 18px;
   color: #000000;
   line-height: 59px;
 }
 
-.p_toolRightToRight  .p_carousel h3{
-  margin:0;
-  border-radius:12px;
+.carousel h3 {
+  margin: 0;
+  border-radius: 12px;
 }
 
-.p_toolRightToRight  .p_carousel .slick-dots-bottom{
+.carousel .slick-dots-bottom {
   justify-content: end;
-  right:12px;
+  right: 12px;
+  bottom: -10px;
+}
+
+:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li.slick-active::after {
+  background: #1974FF;
 }
 
-.p_newDialog {
-  width: 352px;
+:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li button {
+  background: #000000;
+}
+
+.newDialog {
+  width: 252px;
   height: 40px;
-  min-height:40px;
-  margin-top: 20px;
+  min-height: 40px;
   cursor: pointer;
   display: flex;
-  color:#0060FF;
+  color: #0060FF;
   align-items: center;
   background: #EAF3FF;
   border-radius: 11px;
   border: 1px solid #1974FF;
-  transition: all 0.2s ease; /* 添加过渡动画 */
+  transition: all 0.2s ease;
 }
 
-.p_newDialog:hover {
+.newDialog:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.p_newDialog:active {
+.newDialog:active {
   background-color: #c4d9ff;
   border-color: #0040aa;
-  transform: translateY(2px); /* 模拟按下效果 */
-  box-shadow: none; /* 取消阴影，增强按下效果 */
+  transform: translateY(2px);
+  box-shadow: none;
 }
 
-.p_newDialog .p_newDialogText {
+.newDialogText {
   margin-left: 6px;
 }