yt-chat-components 0.1.0

package/src/chatWidget/utils.ts

@@ -0,0 +1,76 @@
+export function getChatPosition(
+	triggerPosition: DOMRect,
+	Cwidth:number,
+	Cheight:number,
+	position?: string,
+): { top: string; left: string;
+	position?: string, } {
+	if (!triggerPosition) {
+		return { top: "0px", left: "0px" }; // Return empty string if trigger position is not available
+	}
+
+	const { top, left, width, height } = triggerPosition;
+
+	const distance = 5; // Adjust this value to set the desired distance from the trigger
+	if(!position) return { top: distance + height+ "px", left: width + "px" };
+
+	switch (position) {
+		case "top-left":
+			return { top: - distance - Cheight + "px", left: -Cwidth + "px" };
+		case "top-center":
+			return { top: - distance - Cheight + "px", left: width/2-Cwidth / 2 + "px" };
+		case "top-right":
+			return { top: - distance - Cheight + "px", left: width+ "px" };
+		case "center-left":
+			return { top: width/2-Cheight/2 + "px", left: -Cwidth - distance + "px" };
+		case "center-right":
+			return {
+				top: width/2-Cheight/2 + "px",
+				left: width + distance + "px",
+			};
+		case "bottom-right":
+			return { top: distance + height+ "px", left: width + "px" };
+		case "bottom-center":
+			return {
+				top: distance + height+ "px",
+				left: width/2-Cwidth / 2 + "px",
+			};
+		case "bottom-left":
+			return { top: distance + height+ "px", left: -Cwidth + "px"};
+		default:
+			return { top: distance + height+ "px", left: width + "px" };	
+		}
+}
+
+export function getAnimationOrigin(position?:string) {
+	if(!position) return "origin-top-left";
+	switch (position) {
+		case "top-left":
+			return 'origin-bottom-right'
+		case "top-center":
+			return "origin-bottom";
+		case "top-right":
+			return "origin-bottom-left";
+		case "center-left":
+			return "origin-center";
+		case "center-right":
+			return "origin-center";
+		case "bottom-right":
+			return "origin-top-left";
+		case "bottom-center":
+			return "origin-top";
+		case "bottom-left":
+			return "origin-top-right"
+		default:
+			return "origin-top-left"
+		}
+}
+
+export function extractMessageFromOutput(output:{type:string, message:any}){
+	console.log(output)
+	const {type, message} = output;
+	if(type === "text") return message;
+	if (type ==="message") return message.text;
+	if(type==="object") return message.text;
+	return "Unknown message structure"
+}

package/src/controllers/index.ts

@@ -0,0 +1,205 @@
+// @ts-nocheck
+import axios from "axios";
+
+export async function sendMessage(baseUrl: string, flowId: string, message: string,input_type:string,output_type:string,sessionId:React.MutableRefObject<string>,output_component?:string, tweaks?: Object,api_key?:string,additional_headers?:{[key:string]:string}) {
+    let data:any;
+    data = {input_type,input_value:message,output_type}
+    if (tweaks) {
+        data["tweaks"]= tweaks
+    }
+    if(output_component){
+        data["output_component"]=output_component;
+    }
+    let headers:{[key:string]:string}= {"Content-Type": "application/json"}
+    if( api_key){
+        headers["x-api-key"]=api_key;
+    }
+    if (additional_headers){
+        headers = Object.assign(headers, additional_headers);
+        // headers = {...headers, ...additional_headers};
+    }
+    if(sessionId.current && sessionId.current!=""){
+        data.session_id=sessionId.current;
+    }
+    data.embed_app_extend = {
+        http_extend:{
+            bd:{code:"2301431205"},
+            // header:{appId:"a", metaId:"b", menuId:"c"},
+            // params:{},
+            body:{code:"2301431205"}
+        },
+        operator_id:"operator_id_123",
+        // /upload_file_path_list :["7bfb7cae-e434-42cc-9b33-9ec482665963\\2025-02-13_16-36-26_wallhaven-0qdq1q_2560x1600.png"]
+    }
+    let response = axios.post(`${baseUrl}/api/v1/run/${flowId}`, data,{headers});
+    return response;
+}
+
+export async function sendMessageStream(
+    embed_app_extend: object,
+    isStream: boolean,
+    handleMessageContent: Function,
+    signal,
+    baseUrl: string,
+    flowId: string,
+    message: string,
+    input_type: string,
+    output_type: string,
+    sessionId: React.MutableRefObject<string>,
+    output_component?: string,
+    tweaks?: Object,
+    api_key?: string,
+    additional_headers?: {
+        [key: string]: string;
+    },
+) {
+    let data: any;
+    data = {input_type, input_value: message, output_type};
+    if (tweaks) {
+        data['tweaks'] = tweaks;
+    }
+    if (output_component) {
+        data['output_component'] = output_component;
+    }
+    if (embed_app_extend) {
+        data['embed_app_extend'] = embed_app_extend;
+    }
+    let headers: { [key: string]: string } = {'Content-Type': 'application/json'};
+    if (api_key) {
+        headers['x-api-key'] = api_key;
+    }
+    if (additional_headers) {
+        headers = Object.assign(headers, additional_headers);
+        // headers = {...headers, ...additional_headers};
+    }
+    // @ts-ignore
+    if (sessionId && sessionId != '') {
+        data.session_id = sessionId;
+    }
+
+    if (isStream) {
+        return await fetchCustomStream(
+            `${baseUrl}/api/v1/run/${flowId}?stream=true`,
+            data,
+            headers,
+            handleMessageContent,
+            signal,
+        );
+    } else {
+        let response = axios.post(`${baseUrl}/api/v1/run/${flowId}`, data,{headers});
+        return response;
+        // const response = await fetch(`${baseUrl}/api/v1/run/${flowId}`, {
+        //   method: 'POST',
+        //   headers: headers,
+        //   body: JSON.stringify(data),
+        // });
+        // const data = await response.json();  // 处理响应数据
+        // return {data, status: response.status};
+
+    }
+}
+
+// 缓冲区用于累积未完成的 JSON 数据
+let buffer = '';
+
+async function fetchCustomStream(url, body, headers, handleMessageContent, signal) {
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: headers,
+        body: JSON.stringify(body),
+        signal: signal,
+    });
+
+    if (!response.ok) {
+        throw new Error('请求失败');
+    }
+
+    // 手动读取响应体作为可读流
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+
+    while (true) {
+        const {done, value} = await reader.read();
+        if (done) break;
+
+        // 将二进制数据解码为字符串，并累积到缓冲区
+        const chunk = decoder.decode(value, {stream: true});
+        buffer += chunk;
+
+        // 提取并解析 JSON
+        const {parsedData, remainingBuffer} = extractAndParseJSON(buffer, handleMessageContent);
+
+        console.log("----------------------- 1")
+        console.log(buffer)
+        console.log(parsedData)
+        console.log(remainingBuffer)
+        console.log("----------------------- 2")
+
+        // 更新缓冲区为剩余未处理的数据
+        buffer = remainingBuffer;
+    }
+
+    // 如果缓冲区中还有剩余数据，可能是不完整的 JSON
+    if (buffer.trim() !== '') {
+        console.warn('缓冲区中存在未完成的 JSON 数据:', buffer);
+    }
+}
+
+// 辅助函数：从缓冲区中提取并解析所有完整的 JSON 对象
+function extractAndParseJSON(buffer, handleMessageContent) {
+    let remainingBuffer = buffer; // 剩余未处理的数据
+    const parsedData = []; // 存储解析成功的 JSON 对象
+    let bracketCount = 0; // 记录大括号的嵌套层次
+    let jsonStartIndex = -1; // 当前 JSON 对象的起始索引
+    let inString = false; // 是否处于字符串内部
+    let escapeChar = false; // 是否遇到转义字符
+
+    for (let i = 0; i < remainingBuffer.length; i++) {
+        const char = remainingBuffer[i];
+
+        if (escapeChar) {
+            escapeChar = false; // 跳过转义字符后的下一个字符
+            continue;
+        }
+
+        if (char === '\\') {
+            escapeChar = true; // 标记转义字符
+            continue;
+        }
+
+        if (char === '"' && !escapeChar) {
+            inString = !inString; // 切换字符串状态
+            continue;
+        }
+
+        if (!inString) {
+            if (char === '{') {
+                if (bracketCount === 0) {
+                    jsonStartIndex = i; // 标记 JSON 开始位置
+                }
+                bracketCount++;
+            } else if (char === '}') {
+                bracketCount--;
+                if (bracketCount === 0 && jsonStartIndex !== -1) {
+                    // 找到一个完整的 JSON 对象
+                    const jsonString = remainingBuffer.slice(jsonStartIndex, i + 1);
+
+                    try {
+                        const parsedJson = JSON.parse(jsonString); // 解析 JSON
+                        handleMessageContent(parsedJson['event'], parsedJson['data']);
+                        parsedData.push(parsedJson); // 添加到解析结果中
+                    } catch (error) {
+                        console.warn('无法解析 JSON 数据:', error);
+                    }
+
+                    // 更新剩余缓冲区的起始位置
+                    remainingBuffer = remainingBuffer.slice(i + 1);
+                    i = -1; // 重置索引以重新开始扫描
+                    jsonStartIndex = -1; // 重置 JSON 起始索引
+                }
+            }
+        }
+    }
+
+    return {parsedData, remainingBuffer}; // 返回解析结果和剩余缓冲区
+}

package/src/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import r2wc from '@r2wc/react-to-web-component';
+import LogoBtn from './YtChatView/logoBtn/index';
+import ToolDialog from "./YtChatView/previewDialog/index";
+import LogoSplitBtn from "./YtChatView/logoSplitBtn/index";
+
+// 手动注入 React 和 ReactDOM 到全局
+window.React = React;
+window.ReactDOM = ReactDOM;
+
+customElements.define('yt-chat', r2wc(LogoBtn, {
+    shadow: "closed",
+    props: {
+        left: "number",
+        right: "number",
+        top: "number",
+        bottom: "number",
+        width: "number",
+        height: "number",
+        iconUrl: "string",
+        title: "string",
+        flowId: "string",
+        hostUrl: "string",
+        userInfo: "json",
+        tags: "json"
+    },
+}));
+
+customElements.define('yt-page-chat', r2wc(ToolDialog, {
+    shadow: "closed",
+    props: {
+        title: "string",
+        flowId: "string",
+        hostUrl: "string",
+        setDialogVisible: "function",
+        userInfo: "json",
+        tags: "json",
+        boxStyle: "json"
+    },
+}));
+
+customElements.define('yt-split-modal-chat', r2wc(LogoSplitBtn, {
+    shadow: "closed",
+    props: {
+        left: "number",
+        right: "number",
+        top: "number",
+        bottom: "number",
+        width: "number",
+        height: "number",
+        iconUrl: "string",
+        title: "string",
+        flowId: "string",
+        hostUrl: "string",
+        userInfo: "json",
+        tags: "json",
+        sceneId: "string"
+    },
+}));

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/types/chatWidget/index.ts

@@ -0,0 +1,13 @@
+export type ChatMessageType = {
+    message: string;
+    isSend: boolean;
+    error?: boolean;
+    bot_message_style?: React.CSSProperties;
+    user_message_style?: React.CSSProperties;
+    error_message_style?: React.CSSProperties;
+  };
+
+
+  export type ChatMessagePlaceholderType = {
+    bot_message_style?: React.CSSProperties;
+  };

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,51 @@
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/index.tsx",
+  output: {
+    filename: "bundle.min.js",
+    path: path.resolve(__dirname, "build/static/js"),
+    libraryTarget: "umd",
+    globalObject: "this",
+    library: "YtChatComponents", // 可选，定义全局命名空间
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx|js|tsx|ts)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-typescript",
+            ],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        use: {
+          loader: "url-loader",
+          options: {
+            limit: 1000000,
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".jsx", ".js", ".tsx", ".ts"],
+  },
+  optimization: {
+    minimize: true,
+    usedExports: false, // 禁用 tree-shaking，避免移除 React
+  },
+};