yt-chat-components 1.3.7 → 1.3.8

package/package.json

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

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

@@ -6,7 +6,7 @@ import remarkGfm from 'remark-gfm';
 import rehypeMathjax from 'rehype-mathjax';
 // import './index.module.css';
 import upFilePng from '../../../../assets/aicenter/upfile.png';
-import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton, Avatar} from 'antd';
+import {Button, Collapse, DatePicker, Form, Image, Input, message as messageTip, Select, Skeleton, Avatar, Card} from 'antd';
 import React, {useRef, useState} from 'react';
 import typePdfPng from '../../../../assets/aicenter/type-pdf.png';
 import typeWordPng from '../../../../assets/aicenter/type-word.png';
@@ -22,7 +22,7 @@ import type {ThoughtChainItem} from '@ant-design/x';
 import {ThoughtChain} from '@ant-design/x';
 import {CheckCircleOutlined, EllipsisOutlined, InfoCircleOutlined, ClockCircleOutlined} from '@ant-design/icons';
 import ChatMessagePlaceholder, {ChatMessagePlaceholderInThought} from "../chatPlaceholder";
-
+import {UrlCard} from "./urlCard"
 let speechSynth = window.speechSynthesis;
 let utterance = null;
 
@@ -231,26 +231,42 @@ export default function ChatMessage({
 
   const renderLoading = (type:MessageType, height:number) => {
     const skeletonContainerId = `skeleton-container-${Math.random().toString(36).substring(2, 9)}`;
-    
-    return (
-        <div 
-          id={skeletonContainerId}
-          style={{minWidth: 500, width: '100%', height, display: 'flex', justifyContent: 'center', alignItems: 'center'}}
-        >
-          {
-            // 其他类型暂不处理
-            (type == MessageType.echart || type == MessageType.form) && (
+    if(type == MessageType.echart || type == MessageType.form){
+      return (
+          <div
+              id={skeletonContainerId}
+              style={{minWidth: 500, width: '100%', height, display: 'flex', justifyContent: 'center', alignItems: 'center'}}
+          >
+            {
               <Skeleton.Image active={true} style={{width: '100%', height: '100%'}}/>
-            )
-          }
-          <style jsx>{`
+            }
+            <style jsx>{`
             #${skeletonContainerId} .ant-skeleton.ant-skeleton-element {
               width: 100% !important;
               height: 100% !important;
             }
           `}</style>
-        </div>
-    )
+          </div>
+      )
+    }else if(type === MessageType.url){
+      return (
+          <div
+              id={skeletonContainerId}
+              style={{minWidth: 80, width: '100%', height, display: 'flex', justifyContent: 'center', alignItems: 'center'}}
+          >
+            {
+              <Skeleton.Button active={true} shape={'default'} block={true} style={{width: '100%', height: '100%'}}/>
+            }
+            <style jsx>{`
+            #${skeletonContainerId} .ant-skeleton.ant-skeleton-element {
+              width: 100% !important;
+              height: 100% !important;
+            }
+          `}</style>
+          </div>
+      )
+    }
+
   }
 
   // 自定义渲染器
@@ -284,6 +300,23 @@ export default function ChatMessage({
           return renderLoading(MessageType.form, 300);
         }
       }
+      // 检查是否是代码块，并且语言为 'url'
+      else if (className && className.includes('language-url-config')) {
+        try {
+          // 解析代码块内容为 JSON 配置
+          // console.log(" --- 1 url_config", children.toString().trim().replace(/\\n/g, '').replace('\n', ''))
+          const url_config = JSON.parse(children.toString().trim().replace(/\\n/g, '').replace('\n', ''));
+          // console.log(" --- 2 url_config", url_config)
+          const {app_name, form_name, form_url} = url_config;
+
+          // 渲染组件
+          return (
+            <UrlCard url={form_url} appName={app_name} menuName={form_name}/>
+          )
+        } catch (error) {
+          return renderLoading(MessageType.url, 50);
+        }
+      }
       // 默认渲染其他代码块
       return <code className={className} {...props}>{children}</code>;
     },
@@ -318,14 +351,11 @@ export default function ChatMessage({
   const renderBotTextMessage = () => {
     const items = messageItemList.map((item, index) => {
       const {id, thinkMessage, message, loadingMessage, type, name, toolCallInfo, rawInfo} = item;
-      const isLatest = index == messageItemList.length - 1;
+      const isLatest = index === messageItemList.length - 1;
       let status = 'success'
-      // 只有在接收信息的时候有 pending 状态
+      // 只有在接收信息的时候有 pending 状态，最后的信息才为 pending
       if (receivingMessage && isLatest){
-        // 最后的信息才为 pending
-        if(isLatest){
-          status = 'pending'
-        }
+        status = 'pending'
       }
 
       const resultItem: ThoughtChainItem = {

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

@@ -0,0 +1,148 @@
+import {ChatMessageType} from "../types/chatWidget";
+import React from "react";
+
+/**
+ * URL卡片样式定义
+ * 用于展示可点击的应用卡片
+ */
+const cardStyle= `
+.boxUrlCard{
+    display: inline-block;
+}
+.section_1 {
+  background: linear-gradient( 221deg, #EFEEFF 0%, #F9F9FF 100%);
+  border-radius: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 12px;
+}
+.image-text_2 {
+  width: 100%;
+  padding: 0 12px 0 12px;
+  display: flex;
+  align-items: center;
+}
+.image_1 {
+  width: 45px;
+  height: 45px;
+  border-radius: 12px;
+}
+.text-group_3 {
+  margin-left: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.text_2 {
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 16px;
+  font-family: PingFangSC-Medium, sans-serif;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  margin-buttom: 8px;
+}
+.text_3 {
+  overflow-wrap: break-word;
+  color: #4C50FF;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+}
+  .line{
+  width: 100%;
+  height: 1.5px;
+  background-color: #D0D5FE;
+  margin: 12px 0;
+  }
+.group_2 {
+  width: 80px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(76, 80, 255, 1);
+  font-size: 20px;
+  font-family: PingFangSC-Medium, sans-serif;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 15px;
+}
+.image-text_3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.text-group_2 {
+  overflow-wrap: break-word;
+  color: rgba(76, 80, 255, 1);
+  font-size: 14px;
+  font-family: PingFangSC-Medium, sans-serif;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+.thumbnail_1 {
+    width: 10px;
+    height: 12px;
+  margin-left: 8px;
+}
+`
+
+/**
+ * URL卡片属性接口
+ */
+export type UrlCardProps = {
+    menuName: string;  // 卡片标题
+    appName: string;   // 应用名称
+    url: string;       // 点击跳转的URL
+    iconUrl?: string;  // 可选的图标URL
+}
+
+/**
+ * URL卡片组件
+ * 用于展示可点击的应用链接卡片
+ * @param props 组件属性
+ * @returns React组件
+ */
+export const UrlCard= ({
+    menuName,
+    appName,
+    url,
+    iconUrl = "https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/card_header.png"
+}: UrlCardProps) => {
+    return (
+        <div className="boxUrlCard" onClick={() => window.open(url, '_blank')}>
+            <style dangerouslySetInnerHTML={{ __html: cardStyle }}></style>
+            <div className="section_1">
+                <div className="image-text_2">
+                    <img
+                        className="image_1"
+                        referrerPolicy="no-referrer"
+                        src={iconUrl}
+                        alt={appName}
+                    />
+                    <div className="text-group_3">
+                        <span className="text_2">{menuName}</span>
+                        <span className="text_3">{appName}</span>
+                    </div>
+                </div>
+                <div className="line"/>
+                <div className="image-text_3">
+                    <span className="text-group_2">立即办理</span>
+                    <img
+                        className="thumbnail_1"
+                        referrerPolicy="no-referrer"
+                        src="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/kai_yuan/common/arrow.png"
+                        alt="箭头"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}

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

@@ -1125,7 +1125,7 @@ export default function ChatWindow({
                   alt="Image"
                 />
               </div>
-              <div className="w_tagItemText" style={isMobile ? {wordBreak: "keep-all"} : {}}>{item?.name}</div>
+              <div className="w_tagItemText" style={isMobile ? {wordBreak: "keep-all", whiteSpace: "nowrap",} : {}}>{item?.name}</div>
             </div>
           ))
         }

package/src/YtChatView/chatWidget/chatWindow/types/chatWidget/index.ts

@@ -1,7 +1,8 @@
 export enum MessageType {
   text,
   form, // 目前只用于渲染loading
-  echart // 目前只用于渲染loading
+  echart, // 目前只用于渲染loading
+  url// 目前只用于渲染loading
 }
 
 export type MessageItem = {