yt-chat-components 0.1.0

package/src/chatWidget/chatWindow/index.tsx

@@ -0,0 +1,426 @@
+// @ts-nocheck
+import { Send } from "lucide-react";
+import { extractMessageFromOutput, getAnimationOrigin, getChatPosition } from "../utils";
+import React, { useEffect, useRef, useState } from "react";
+import { ChatMessageType } from "../../types/chatWidget";
+import ChatMessage from "./chatMessage";
+import {sendMessage, sendMessageStream} from "../../controllers";
+import ChatMessagePlaceholder from "../../chatPlaceholder";
+
+export default function ChatWindow({
+  api_key,
+  flowId,
+  hostUrl,
+  updateLastMessage,
+  messages,
+  output_type,
+  input_type,
+  output_component,
+  bot_message_style,
+  send_icon_style,
+  user_message_style,
+  chat_window_style,
+  error_message_style,
+  placeholder_sending,
+  send_button_style,
+  online = true,
+  open,
+  online_message = "We'll reply as soon as we can",
+  offline_message = "We're offline now",
+  window_title = "Chat",
+  placeholder,
+  input_style,
+  input_container_style,
+  addMessage,
+  position,
+  triggerRef,
+  width = 450,
+  height = 650,
+  tweaks,
+  sessionId,
+  additional_headers
+}: {
+  api_key?: string;
+  output_type: string,
+  input_type: string,
+  output_component?: string,
+  bot_message_style?: React.CSSProperties;
+  send_icon_style?: React.CSSProperties;
+  user_message_style?: React.CSSProperties;
+  chat_window_style?: React.CSSProperties;
+  error_message_style?: React.CSSProperties;
+  send_button_style?: React.CSSProperties;
+  online?: boolean;
+  open: boolean;
+  online_message?: string;
+  placeholder_sending?: string;
+  offline_message?: string;
+  window_title?: string;
+  placeholder?: string;
+  input_style?: React.CSSProperties;
+  input_container_style?: React.CSSProperties;
+  tweaks?: { [key: string]: any };
+  flowId: string;
+  hostUrl: string;
+  updateLastMessage: Function;
+  messages: ChatMessageType[];
+  addMessage: Function;
+  position?: string;
+  triggerRef: React.RefObject<HTMLButtonElement>;
+  width?: number;
+  height?: number;
+  sessionId: React.MutableRefObject<string>;
+  additional_headers?: { [key: string]: string };
+
+}) {
+  const [value, setValue] = useState<string>("");
+  const ref = useRef<HTMLDivElement>(null);
+  const lastMessage = useRef<HTMLDivElement>(null);
+  const [windowPosition, setWindowPosition] = useState({ left: "0", top: "0" });
+  const abortControllerRef = useRef(new AbortController());
+  const inputRef = useRef<HTMLInputElement>(null); /* User input Ref */
+  useEffect(() => {
+    if (triggerRef)
+      setWindowPosition(
+        getChatPosition(
+          triggerRef.current!.getBoundingClientRect(),
+          width,
+          height,
+          position
+        )
+      );
+  }, [triggerRef, width, height, position]);
+
+  const isStreamOutput = true;
+
+  /* Initial listener for loss of focus that refocuses User input after a small delay */
+
+  const [sendingMessage, setSendingMessage] = useState(false);
+
+  // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
+  const handleMessageContent = (event, data) => {
+    if (event == 'add_message' && data['sender'] == 'Machine') {
+      getHistoryList();
+    } else if (event == 'token') {
+      setNowAIContent((prevState) => prevState + data['chunk']);
+      if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+    } else if (event == 'end') {
+      const res = {
+        data: data['result'],
+      };
+      if (
+          res.data &&
+          res.data.outputs &&
+          Object.keys(res.data.outputs).length > 0 &&
+          res.data.outputs[0].outputs &&
+          res.data.outputs[0].outputs.length > 0
+      ) {
+        const flowOutputs: Array<any> = res.data.outputs[0].outputs;
+        if (output_component && flowOutputs.map((e) => e.component_id).includes(output_component)) {
+          Object.values(
+              flowOutputs.find((e) => e.component_id === output_component).outputs,
+          ).forEach((output: any) => {
+            addMessage({
+              message: extractMessageFromOutput(output),
+              isSend: false,
+              rawInfo: output.message,
+            });
+          });
+        } else if (flowOutputs.length === 1) {
+          Object.values(flowOutputs[0].outputs).forEach((output: any) => {
+            addMessage({
+              message: extractMessageFromOutput(output),
+              isSend: false,
+              rawInfo: output.message,
+            });
+          });
+        } else {
+          flowOutputs
+              .sort((a, b) => {
+                // Get the earliest timestamp from each flowOutput's outputs
+                const aTimestamp = Math.min(
+                    ...Object.values(a.outputs).map((output: any) =>
+                        Date.parse(output.message?.timestamp),
+                    ),
+                );
+                const bTimestamp = Math.min(
+                    ...Object.values(b.outputs).map((output: any) =>
+                        Date.parse(output.message?.timestamp),
+                    ),
+                );
+                return aTimestamp - bTimestamp; // Sort descending (newest first)
+              })
+              .forEach((flowOutput) => {
+                Object.values(flowOutput.outputs).forEach((output: any) => {
+                  addMessage({
+                    message: extractMessageFromOutput(output),
+                    isSend: false,
+                    rawInfo: output.message,
+                  });
+                });
+              });
+        }
+      }
+      if (res.data && res.data.session_id) {
+        // sessionId = res.data.session_id;
+      }
+      setSendingMessage(false);
+    }
+  };
+
+  const sendMessageWrapper =()=>{
+    sendMessage(hostUrl, flowId, value, input_type, output_type, sessionId, output_component, tweaks, api_key, additional_headers)
+      .then((res) => {
+        if (
+          res.data &&
+          res.data.outputs &&
+          Object.keys(res.data.outputs).length > 0 &&
+          res.data.outputs[0].outputs && res.data.outputs[0].outputs.length > 0
+        ) {
+          const flowOutputs: Array<any> = res.data.outputs[0].outputs;
+          if (output_component &&
+            flowOutputs.map(e => e.component_id).includes(output_component)) {
+            Object.values(flowOutputs.find(e => e.component_id === output_component).outputs).forEach((output: any) => {
+              addMessage({
+                message: extractMessageFromOutput(output),
+                isSend: false,
+              });
+            })
+          } else if (
+            flowOutputs.length === 1
+          ) {
+            Object.values(flowOutputs[0].outputs).forEach((output: any) => {
+              addMessage({
+                message: extractMessageFromOutput(output),
+                isSend: false,
+              });
+            })
+          } else {
+            flowOutputs
+              .sort((a, b) => {
+                // Get the earliest timestamp from each flowOutput's outputs
+                const aTimestamp = Math.min(...Object.values(a.outputs).map((output: any) => Date.parse(output.message?.timestamp)));
+                const bTimestamp = Math.min(...Object.values(b.outputs).map((output: any) => Date.parse(output.message?.timestamp)));
+                return aTimestamp - bTimestamp; // Sort descending (newest first)
+              })
+              .forEach((flowOutput) => {
+                Object.values(flowOutput.outputs).forEach((output: any) => {
+                  addMessage({
+                    message: extractMessageFromOutput(output),
+                    isSend: false,
+                  });
+                });
+              });
+          }
+        }
+        if (res.data && res.data.session_id) {
+          sessionId.current = res.data.session_id;
+        }
+        setSendingMessage(false);
+      })
+      .catch((err) => {
+        const response = err.response;
+        if (err.code === "ERR_NETWORK") {
+          updateLastMessage({
+            message: "Network error",
+            isSend: false,
+            error: true,
+          });
+        } else if (
+          response &&
+          response.status === 500 &&
+          response.data &&
+          response.data.detail
+        ) {
+          updateLastMessage({
+            message: response.data.detail,
+            isSend: false,
+            error: true,
+          });
+        }
+        console.error(err);
+        setSendingMessage(false);
+      });
+  }
+
+  const sendMessageStreamWrapper = ()=>{
+    let embedAppExtend: embedAppExtend = {
+      operator_id: "2204411202",
+      upload_file_path_list: [],
+      http_extend: {
+        bd:{
+          code: "2204411202"
+        },
+        body: {
+          code: "2204411202"
+        }
+      }
+    };
+    sendMessageStream(
+        embedAppExtend,
+        false,
+        handleMessageContent,
+        abortControllerRef.current.signal,
+        hostUrl,
+        flowId,
+        value,
+        input_type,
+        output_type,
+        sessionId.current,
+        output_component,
+        tweaks,
+        api_key,
+        additional_headers,
+    )
+        .then((res) => {
+          setSendingMessage(false);
+        })
+        .catch((e) => {
+          console.log('e :>> ', e);
+          if (e.name !== 'AbortError') {
+            addMessage({
+              message: '网络错误',
+              isSend: false,
+            });
+          }
+          setSendingMessage(false);
+        })
+  }
+  function handleClick() {
+    if (value && value.trim() !== "") {
+      addMessage({ message: value, isSend: true });
+      setSendingMessage(true);
+      setValue("");
+      isStreamOutput ? sendMessageStreamWrapper() : sendMessageWrapper();
+    }
+  }
+
+  useEffect(() => {
+    if (lastMessage.current)
+      lastMessage.current.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  /* Refocus the User input whenever a new response is returned from the LLM */
+
+  useEffect(() => {
+    // after a slight delay
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 100);
+  }, [messages, open]);
+
+  // console.log("---->",{
+  //   api_key,
+  //   flowId,
+  //   hostUrl,
+  //   updateLastMessage,
+  //   messages,
+  //   output_type,
+  //   input_type,
+  //   output_component,
+  //   bot_message_style,
+  //   send_icon_style,
+  //   user_message_style,
+  //   chat_window_style,
+  //   error_message_style,
+  //   placeholder_sending,
+  //   send_button_style,
+  //   online,
+  //   open,
+  //   online_message,
+  //   offline_message,
+  //   window_title,
+  //   placeholder,
+  //   input_style,
+  //   input_container_style,
+  //   addMessage,
+  //   position,
+  //   triggerRef,
+  //   width,
+  //   height,
+  //   tweaks,
+  //   sessionId,
+  //   additional_headers
+  // })
+
+  return (
+    <div
+      className={
+        "cl-chat-window " +
+        getAnimationOrigin(position) +
+        (open ? " cl-scale-100" : " cl-scale-0")
+      }
+      style={{ ...windowPosition, zIndex: 9999 }}
+    >
+      <div
+        style={{ ...chat_window_style, width: width, height: height }}
+        ref={ref}
+        className="cl-window"
+      >
+        <div className="cl-header">
+          {window_title}
+          <div className="cl-header-subtitle">
+            {online ? (
+              <>
+                <div className="cl-online-message"></div>
+                {online_message}
+              </>
+            ) : (
+              <>
+                <div className="cl-offline-message"></div>
+                {offline_message}
+              </>
+            )}
+          </div>
+        </div>
+        <div className="cl-messages_container">
+          {messages.map((message, index) => (
+            <ChatMessage
+              bot_message_style={bot_message_style}
+              user_message_style={user_message_style}
+              error_message_style={error_message_style}
+              key={index}
+              message={message.message}
+              isSend={message.isSend}
+              error={message.error}
+            />
+          ))}
+          {sendingMessage && (
+            <ChatMessagePlaceholder bot_message_style={bot_message_style} />
+          )}
+          <div ref={lastMessage}></div>
+        </div>
+        <div style={input_container_style} className="cl-input_container">
+          <input
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleClick();
+            }}
+            type="text"
+            disabled={sendingMessage}
+            placeholder={sendingMessage ? (placeholder_sending || "Thinking...") : (placeholder || "Type your message...")}
+            style={input_style}
+            ref={inputRef}
+            className="cl-input-element"
+          />
+          <button
+            style={send_button_style}
+            disabled={sendingMessage}
+            onClick={handleClick}
+          >
+            <Send
+              style={send_icon_style}
+              className={
+                "cl-send-icon " +
+                (!sendingMessage
+                  ? "cl-notsending-message"
+                  : "cl-sending-message")
+              }
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}