yt-chat-components 1.0.0 → 1.0.2

package/src/chatWidget/chatWindow/index.tsx

@@ -1,426 +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 isStream = 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("");
-      isStream ? 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>
-  );
-}
+// @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 isStream = 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("");
+      isStream ? 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>
+  );
+}