feat: 徽智制联-deepSeek-chatui引入+测试

史婷婷
1 parent 744273b7
Showing 6 changed files with 128 additions and 23 deletions
package.json
src/main.tsx
src/pages/deep-seek-index/index.tsx
src/pages/deep-seek-index/style.less
src/pages/test.tsx
src/router.tsx
--- a/package.json
View file @56c01b8
+++ b/package.json
View file @56c01b8
@@ -10,36 +10,37 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chatui/core": "^2.4.2",
     "antd": "^5.22.3",
     "axios": "^1.7.3",
     "cesium": "^1.124.0",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.11",
+    "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
     "rc-pagination": "^4.2.0",
-    "rc-tooltip": "^6.2.0",
     "react": "^18.3.1",
-    "js-cookie": "^3.0.5",
     "react-dom": "^18.3.1",
     "react-echarts": "^0.1.1",
-    "react-router-dom": "^6.26.0",
-    "swiper": "^8.4.4",
     "react-markdown": "^9.0.1",
-    "lodash-es": "^4.17.21",
-    "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.0",
+    "react-router-dom": "^6.26.0",
+    "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "react-syntax-highlighter": "^15.6.1"
+    "swiper": "^8.4.4"
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.6",
     "@types/echarts": "^4.9.22",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -48,9 +49,8 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "typescript": "^5.2.2",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "vite": "^5.3.4",
-    "postcss-px-to-viewport": "^1.1.1"
+    "vite": "^5.3.4"
   }
 }
--- a/src/main.tsx
View file @56c01b8
+++ b/src/main.tsx
View file @56c01b8
 import ReactDOM from 'react-dom/client'
 import "normalize.css"
-import 'rc-tooltip/assets/bootstrap.css';
 import './index.less'
+import '@chatui/core/es/styles/index.less';
+// 引入样式
+import '@chatui/core/dist/index.css';
 import router from './router'
 import {
--- a/src/pages/deep-seek-index/index.tsx
View file @56c01b8
+++ b/src/pages/deep-seek-index/index.tsx
View file @56c01b8
 import React, {useState, useEffect, useRef} from "react";
-import '../../components/deepSeekIndex/base.less'
 import './style.less'
 import { Button, Input } from 'antd';
 import Markdown from '@/components/deepSeekIndex/Markdown'
-import laBanner from "./laBanner.png";
+import laBanner from "./laBanner.png";ch
-const LaTest: React.FC = () => {
+const DeepSeekIndex: React.FC = () => {
     const [searchValue, setSearchValue] = useState<any>();
     const [chatHistory, setChatHistory] = useState<any[]>([]);
@@ -89,13 +88,13 @@ const LaTest: React.FC = () => {
     }, [chatHistory])
     return (
-       <div className={'la-test'}>
-           <div className={'la-test_header'}>
+       <div className={'deep-seek'}>
+           <div className={'deep-seek_header'}>
                <img src={laBanner} alt=""/>
            </div>
            <div
                ref={chatRef}
-               className={'la-test_content'}
+               className={'deep-seek_content'}
            >
                {chatHistory?.map((msg, index) => (
                    <p key={index} className={`mb-2 ${msg.role === 'user' ? 'text-right' : 'text-left'}`}>
@@ -114,7 +113,7 @@ const LaTest: React.FC = () => {
                    </p>
                )}
            </div>
-           <div className={'la-test_footer'}>
+           <div className={'deep-seek_footer'}>
                <Input
                    type="text"
                    value={searchValue}
@@ -130,4 +129,4 @@ const LaTest: React.FC = () => {
     );
 };
-export default LaTest;
+export default DeepSeekIndex;
--- a/src/pages/deep-seek-index/style.less
View file @56c01b8
+++ b/src/pages/deep-seek-index/style.less
View file @56c01b8
-.la-test {
+.deep-seek {
   background: #f1f1f1;
   height: 100%;
   width: 100%;
--- a/src/pages/test.tsx 0 → 100644
View file @56c01b8
+++ b/src/pages/test.tsx 0 → 100644
View file @56c01b8
+import React from "react";
+// 引入组件
+import Chat, { Bubble, useMessages } from '@chatui/core';
+// 默认快捷短语，可选
+const defaultQuickReplies = [
+    {
+        icon: 'message',
+        name: '联系人工服务',
+        isNew: true,
+        isHighlight: true,
+    },
+    {
+        name: '短语1',
+        isNew: true,
+    },
+    {
+        name: '短语2',
+        isHighlight: true,
+    },
+    {
+        name: '短语3',
+    },
+];
+
+const initialMessages = [
+    {
+        type: 'text',
+        content: { text: '主人好，我是智能助理，你的贴心小助手~' },
+        user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' },
+    },
+    {
+        type: 'image',
+        content: {
+            picUrl: '//img.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png',
+        },
+    },
+];
+
+const Test: React.FC = () => {
+    // 消息列表
+    const { messages, appendMsg, setTyping } = useMessages(initialMessages);
+// 发送回调
+    function handleSend(type, val) {
+        if (type === 'text' && val.trim()) {
+            // TODO: 发送请求
+            appendMsg({
+                type: 'text',
+                content: { text: val },
+                position: 'right',
+            });
+
+            setTyping(true);
+
+            // 模拟回复消息
+            setTimeout(() => {
+                appendMsg({
+                    type: 'text',
+                    content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
+                });
+            }, 1000);
+        }
+    }
+
+    // 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
+    function handleQuickReplyClick(item) {
+        handleSend('text', item.name);
+    }
+
+    function renderMessageContent(msg) {
+        const { type, content } = msg;
+
+        // 根据消息类型来渲染
+        switch (type) {
+            case 'text':
+                return <Bubble content={content.text} />;
+            case 'image':
+                return (
+                    <Bubble type="image">
+                        <img src={content.picUrl} alt="" />
+                    </Bubble>
+                );
+            default:
+                return null;
+        }
+    }
+    return(
+        <Chat
+            navbar={{ title: '智能助理' }}
+            messages={messages}
+            renderMessageContent={renderMessageContent}
+            quickReplies={defaultQuickReplies}
+            onQuickReplyClick={handleQuickReplyClick}
+            onSend={handleSend}
+        />
+    );
+};
+
+export default Test;
--- a/src/router.tsx
View file @56c01b8
+++ b/src/router.tsx
View file @56c01b8
 import {createHashRouter} from 'react-router-dom';
 import ErrorPage from "./pages/errorPage";
-import DeepSeekIndex from "@/pages/deep-seek-index";
+import DeepSeekIndex from "./pages/deep-seek-index";
+import Test from "./pages/test";
 const routers = [
     {
@@ -13,6 +14,11 @@ const routers = [
         element: <DeepSeekIndex />,
         errorElement: <ErrorPage />,
     },
+    {
+        path: '/test',
+        element: <Test />,
+        errorElement: <ErrorPage />,
+    },
 ];
 export default createHashRouter(routers)