@apia/ai 3.0.12 → 3.0.13

package/dist/index.js

@@ -1,8 +1,12 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
 import { Box, getVariant, Textarea, Paragraph } from '@apia/theme';
-import { getLabel, EventEmitter } from '@apia/util';
-import { useRef, useCallback, useState, useEffect } from 'react';
+import { useRef, useCallback, useState } from 'react';
 import { IconButton, SimpleButton, ApiaUtil } from '@apia/components';
+import { getLabel, noNaN, AudioRecorder, EventEmitter } from '@apia/util';
+import { makeObservable, observable } from 'mobx';
+import { FileIcon } from '@apia/icons';
+import { uniqueId } from '@apia/notifications';
+import { observer } from 'mobx-react-lite';
 
 const AutoscrollContainer = ({ children }) => {
   const observer = useRef(null);
@@ -143,7 +147,7 @@ function useHandleFileUpload({
   const handleFileUpload = useCallback(
     async (ev) => {
       setProgress(0);
-      const imageProcessor = getImageOcrMaker();
+      const imageProcessor = getImageOcrMaker("spa");
       const pdfProcessor = getPdfReader();
       await (async () => {
         const obtainedText = [];
@@ -186,43 +190,50 @@ function useHandleFileUpload({
   return { progress, handleFileUpload };
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var __accessCheck$1 = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet$1 = (obj, member, getter) => {
-  __accessCheck$1(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd$1 = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet$1 = (obj, member, value, setter) => {
-  __accessCheck$1(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _message;
 let maxId = 0;
 class ChatMessage {
-  constructor(message, messageType) {
+  constructor(message = "", messageType = "user", attachments = []) {
+    this.message = message;
     this.messageType = messageType;
-    __publicField$2(this, "id");
-    __privateAdd$1(this, _message, void 0);
+    this.attachments = attachments;
+    __publicField$5(this, "id");
+    __publicField$5(this, "copy", () => new ChatMessage(this.message, this.messageType, this.attachments));
+    __publicField$5(this, "Component", () => {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          as: "pre",
+          className: `history__message ${this.messageType}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "text_wrapper",
+                ...typeof this.message === "string" ? { dangerouslySetInnerHTML: { __html: this.message } } : { children: this.message }
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { className: "additionalContent_wrapper", children: this.attachments.map((x) => /* @__PURE__ */ jsx(x.Component, {}, x.id)) })
+          ]
+        },
+        this.id
+      );
+    });
     this.id = maxId++;
-    __privateSet$1(this, _message, message);
     if (messageType === "response")
       this.messageType = "system";
     if (typeof message === "string")
-      __privateSet$1(this, _message, this.parseMessage(message));
+      this.message = this.parseMessage(message);
+    makeObservable(this, {
+      attachments: observable,
+      message: observable,
+      messageType: observable
+    });
   }
   parseMessage(message) {
     let result = message;
@@ -230,229 +241,446 @@ class ChatMessage {
     result = result.replaceAll("[/strong]", "</strong>");
     return result;
   }
-  get message() {
-    return __privateGet$1(this, _message);
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class AIContent {
+  constructor(content) {
+    __publicField$4(this, "content");
+    __publicField$4(this, "Component", () => {
+      return /* @__PURE__ */ jsx(Box, { variant: "layout.common.components.aiMessage.textBox", children: /* @__PURE__ */ jsx(Box, { variant: "layout.common.components.aiMessage.textSnippet", children: this.content }) });
+    });
+    this.content = content;
   }
 }
-_message = new WeakMap();
 
-const makeTextarea = (gptController) => {
-  const NewTextarea = ({
-    hideDeleteButton,
-    isLoading: outIsLoading,
-    onSubmit,
-    preventAppendUserMessages
-  }) => {
-    const [isLoading, setIsLoading] = useState(false);
-    const submit = useCallback(
-      (text) => {
+const AIFileContentAllowedExtensions = {
+  svg: "svg",
+  png: "png",
+  jpg: "jpg",
+  jpeg: "jpeg",
+  txt: "txt",
+  doc: "doc",
+  pdf: "pdf",
+  docx: "docx",
+  csv: "csv",
+  xlsx: "xlsx",
+  xls: "xls",
+  mp3: "mp3",
+  wav: "wav"
+};
+var FileType = /* @__PURE__ */ ((FileType2) => {
+  FileType2["DOCUMENT"] = "DOCUMENT";
+  FileType2["IMAGE"] = "IMAGE";
+  FileType2["AUDIO"] = "AUDIO";
+  FileType2["SHEET"] = "SHEET";
+  return FileType2;
+})(FileType || {});
+var AIMessageRole = /* @__PURE__ */ ((AIMessageRole2) => {
+  AIMessageRole2["USER"] = "USER";
+  AIMessageRole2["SYSTEM"] = "SYSTEM";
+  return AIMessageRole2;
+})(AIMessageRole || {});
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _AIFileContent = class _AIFileContent extends AIContent {
+  constructor(content, fileUrl, fileName, f) {
+    const extension = _AIFileContent.getExtensionFromFileName(fileName);
+    if (!_AIFileContent.isValidExtension(extension))
+      throw new Error(_AIFileContent.getExtensionErrorMessage(extension));
+    super(content);
+    __publicField$3(this, "type");
+    __publicField$3(this, "fileUrl");
+    __publicField$3(this, "fileName");
+    __publicField$3(this, "extension");
+    __publicField$3(this, "__file");
+    __publicField$3(this, "Component", () => /* @__PURE__ */ jsxs(Box, { variant: "layout.common.components.aiMessage.fileBox", children: [
+      FileType.IMAGE === this.type ? /* @__PURE__ */ jsx("img", { src: URL.createObjectURL(this.file), alt: this.fileName }) : /* @__PURE__ */ jsx(FileIcon, { iconSize: "lg", docName: this.fileName }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          as: "p",
+          variant: "layout.common.components.aiMessage.fileName",
+          title: this.fileName,
+          children: this.fileName
+        }
+      )
+    ] }));
+    this.fileUrl = fileUrl;
+    this.extension = extension;
+    this.type = _AIFileContent.inferExtension(extension);
+    this.fileName = fileName;
+    this.__file = f;
+  }
+  get file() {
+    if (!this.__file)
+      throw new Error("File is undefined");
+    return this.__file;
+  }
+  static getExtensionFromFileName(fileName) {
+    return fileName.split(".", 2).pop();
+  }
+  static getExtensionErrorMessage(extension) {
+    return `extension "${extension}" is not included into valid types:
+${Object.keys(AIFileContentAllowedExtensions)}`;
+  }
+};
+__publicField$3(_AIFileContent, "blobToBase64", async (blob) => {
+  return await ((blob2) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const base64String = reader.result;
+      resolve(base64String);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob2);
+  }))(blob);
+});
+__publicField$3(_AIFileContent, "fromFile", async (f, content) => {
+  const fileUrl = await ((f2) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(f2);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject();
+  }))(f);
+  return new _AIFileContent(content, fileUrl, f.name, f);
+});
+__publicField$3(_AIFileContent, "inferExtension", (extension) => {
+  switch (extension) {
+    case AIFileContentAllowedExtensions.jpg:
+    case AIFileContentAllowedExtensions.jpeg:
+    case AIFileContentAllowedExtensions.png:
+    case AIFileContentAllowedExtensions.svg:
+      return FileType.IMAGE;
+    case AIFileContentAllowedExtensions.txt:
+    case AIFileContentAllowedExtensions.doc:
+    case AIFileContentAllowedExtensions.pdf:
+    case AIFileContentAllowedExtensions.docx:
+      return FileType.DOCUMENT;
+    case AIFileContentAllowedExtensions.csv:
+    case AIFileContentAllowedExtensions.xlsx:
+    case AIFileContentAllowedExtensions.xls:
+      return FileType.SHEET;
+    case AIFileContentAllowedExtensions.mp3:
+    case AIFileContentAllowedExtensions.wav:
+      return FileType.AUDIO;
+    default:
+      throw new Error(_AIFileContent.getExtensionErrorMessage(extension));
+  }
+});
+__publicField$3(_AIFileContent, "isValidExtension", (extension) => {
+  return Object.values(
+    AIFileContentAllowedExtensions
+  ).includes(extension);
+});
+let AIFileContent = _AIFileContent;
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class AIMessageAttachments {
+  constructor(role, content, close) {
+    this.close = close;
+    __publicField$2(this, "role");
+    __publicField$2(this, "content");
+    __publicField$2(this, "id", uniqueId());
+    __publicField$2(this, "Component", (props) => /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.common.components.aiMessage"), children: [
+      props.closeButton ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "closeButton",
+          size: "Md",
+          icon: "Close",
+          onClick: this.close,
+          title: getLabel("lblDeleteItem").title
+        }
+      ) : /* @__PURE__ */ jsx(Fragment, {}),
+      /* @__PURE__ */ jsx(this.content.Component, {})
+    ] }));
+    this.role = role;
+    this.content = content;
+  }
+}
+
+const handleFileUploadAsMessage = async (fileInputElement, chatController) => {
+  if (fileInputElement.files) {
+    [...fileInputElement.files].forEach(async (f) => {
+      const m = new AIMessageAttachments(
+        AIMessageRole.USER,
+        await AIFileContent.fromFile(
+          f,
+          "you must collect information contained in this image as help to build your tool choice"
+        ),
+        () => chatController.attachments.drop(m)
+      );
+      chatController.attachments.add(m);
+    });
+  }
+};
+
+const makeTextarea = (chatController) => {
+  const NewTextarea = observer(
+    ({
+      hideDeleteButton,
+      isLoading: outIsLoading,
+      onSubmit,
+      preventAppendUserMessages
+    }) => {
+      const [isLoading, setIsLoading] = useState(false);
+      const submit = useCallback(() => {
         if (preventAppendUserMessages !== true)
-          gptController.messages.add(new ChatMessage(text, "user"));
-        gptController.history.add(text);
-        onSubmit(text).finally(() => {
+          chatController.messages.add(chatController.state.current);
+        chatController.history.add(chatController.state.current);
+        onSubmit(chatController.state.current).finally(() => {
           setIsLoading(false);
+          chatController.state.current = new ChatMessage();
         });
-      },
-      [onSubmit, preventAppendUserMessages]
-    );
-    const handleSubmit = useCallback(
-      (ev) => {
+      }, [onSubmit, preventAppendUserMessages]);
+      const handleSubmit = useCallback(
+        (ev) => {
+          ev.preventDefault();
+          if (chatController.state.current.message || chatController.attachments.size() > 0) {
+            setIsLoading(true);
+            submit();
+          }
+          const textarea = document.getElementById(
+            `GPTMessage${chatController.id}`
+          );
+          textarea.focus();
+        },
+        [submit]
+      );
+      const onKeyDown = useCallback((ev) => {
+        if (ev.target.readOnly)
+          return;
+        if (ev.code === "Enter" && !ev.shiftKey) {
+          ev.preventDefault();
+          ev.target.closest("form")?.querySelector('button[type="submit"]')?.click();
+        }
+      }, []);
+      const { progress, handleFileUpload } = useHandleFileUpload({
+        onContent(content) {
+          document.getElementById(
+            `GPTMessage${chatController.id}`
+          ).value = content.join("\n\n");
+        }
+      });
+      const actualIsLoading = isLoading || progress !== 100 || outIsLoading;
+      const [dragging, setDragging] = useState(false);
+      const handleDragLeave = (ev) => {
         ev.preventDefault();
-        const textarea = document.getElementById(
-          `GPTMessage${gptController.id}`
+        setDragging(false);
+      };
+      const handleDrop = (ev) => {
+        ev.preventDefault();
+        setDragging(false);
+        const fileElement = document.getElementById(
+          `gptUploadFile__${chatController.id}`
         );
-        if (textarea.value) {
-          setIsLoading(true);
-          submit(textarea.value);
-        }
-        textarea.focus();
-        textarea.value = "";
-      },
-      [submit]
-    );
-    const onKeyDown = useCallback((ev) => {
-      if (ev.target.readOnly)
-        return;
-      if (ev.code === "Enter" && !ev.shiftKey) {
+        fileElement.files = ev.dataTransfer.files;
+        const event = new Event("change", { bubbles: true });
+        fileElement.dispatchEvent(event);
+      };
+      const handleDragOver = (ev) => {
         ev.preventDefault();
-        ev.target.closest("form")?.querySelector('button[type="submit"]')?.click();
-      }
-    }, []);
-    const { progress, handleFileUpload } = useHandleFileUpload({
-      onContent(content) {
-        document.getElementById(
-          `GPTMessage${gptController.id}`
-        ).value = content.join("\n\n");
-      }
-    });
-    const actualIsLoading = isLoading || progress !== 100 || outIsLoading;
-    const [dragging, setDragging] = useState(false);
-    const handleDragLeave = (ev) => {
-      ev.preventDefault();
-      setDragging(false);
-    };
-    const handleDrop = (ev) => {
-      ev.preventDefault();
-      setDragging(false);
-      const fileElement = document.getElementById(
-        `gptUploadFile__${gptController.id}`
-      );
-      fileElement.files = ev.dataTransfer.files;
-      const event = new Event("change", { bubbles: true });
-      fileElement.dispatchEvent(event);
-    };
-    const handleDragOver = (ev) => {
-      ev.preventDefault();
-    };
-    const handleDragEnter = (ev) => {
-      ev.preventDefault();
-      setDragging(true);
-    };
-    return /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onDrop: handleDrop,
-        onDragOver: handleDragOver,
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onSubmit: handleSubmit,
-        className: "gpt__form",
-        action: "",
-        children: [
-          dragging ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                height: "150px",
-                border: "3px dashed #aaa",
-                width: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: getLabel("msgAiDragAndDrop").text
-            }
-          ) : /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              onKeyDown,
-              id: `GPTMessage${gptController.id}`,
-              readOnly: actualIsLoading
-            }
-          ),
-          /* @__PURE__ */ jsxs(Box, { className: "gpt__buttonsContainer", children: [
-            /* @__PURE__ */ jsx(Box, { sx: { display: "none" }, children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "file",
-                className: "gptUploadFile",
-                id: `gptUploadFile__${gptController.id}`,
-                onChange: (ev) => {
-                  handleFileUpload(ev).catch((e) => {
-                    if (e instanceof WrongFormatError) {
-                      setIsLoading(false);
-                      gptController.messages.add(
-                        new ChatMessage(
-                          getLabel("msgAiFileExtensionError").text,
-                          "error"
-                        )
-                      );
-                    } else {
-                      throw e;
-                    }
-                  });
-                }
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                title: getLabel("btnUploadFile").text,
-                icon: "File",
-                variant: "icon-outline",
-                disabled: actualIsLoading,
-                onClick: () => {
-                  document.getElementById(
-                    `gptUploadFile__${gptController.id}`
-                  ).click();
-                },
-                size: "Lg"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SimpleButton,
-              {
-                title: getLabel("btnAiPrevious").title,
-                variant: "outline",
-                type: "button",
-                onClick: () => {
-                  const historyValue = gptController.history.previous();
-                  if (historyValue)
-                    document.getElementById(
-                      `GPTMessage${gptController.id}`
-                    ).value = historyValue;
-                },
-                size: "sm",
-                children: getLabel("btnAiPrevious").text
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SimpleButton,
-              {
-                title: getLabel("btnAiNext").title,
-                variant: "outline",
-                type: "button",
-                onClick: () => {
-                  const historyValue = gptController.history.next();
-                  document.getElementById(
-                    `GPTMessage${gptController.id}`
-                  ).value = historyValue ?? "";
-                },
-                size: "sm",
-                children: getLabel("btnAiNext").text
-              }
-            ),
-            !hideDeleteButton && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                SimpleButton,
+      };
+      const handleDragEnter = (ev) => {
+        ev.preventDefault();
+        setDragging(true);
+      };
+      return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flexWrap: "wrap",
+              display: "flex",
+              maxHeight: "280px",
+              overflowY: "auto",
+              paddingTop: "6px",
+              paddingBottom: "6px"
+            },
+            children: chatController.attachments.getComponents()
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onDrop: handleDrop,
+            onDragOver: handleDragOver,
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onSubmit: handleSubmit,
+            className: "gpt__form",
+            action: "",
+            children: [
+              dragging ? /* @__PURE__ */ jsx(
+                Box,
                 {
-                  title: getLabel("btnAiDelete").title,
-                  variant: "outline",
-                  type: "button",
-                  onClick: () => document.getElementById(
-                    `GPTMessage${gptController.id}`
-                  ).value = "",
-                  size: "sm",
-                  children: getLabel("btnAiDelete").text
+                  sx: {
+                    height: "150px",
+                    border: "3px dashed #aaa",
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: getLabel("msgAiDragAndDrop").text
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                SimpleButton,
+              ) : /* @__PURE__ */ jsx(
+                Textarea,
                 {
-                  title: getLabel("btnAiDeleteMessages").title,
-                  variant: "outline",
-                  type: "button",
-                  onClick: () => gptController.messages.clear(),
-                  size: "sm",
-                  children: getLabel("btnAiDeleteMessages").text
+                  onKeyDown,
+                  id: `GPTMessage${chatController.id}`,
+                  readOnly: actualIsLoading,
+                  value: chatController.state.current.message,
+                  onChange: (ev) => {
+                    chatController.state.current.message = ev.target.value;
+                    if (!chatController.state.current.message && chatController.attachments.size() < 1)
+                      chatController.currentHistoryIndex = -1;
+                  }
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              SimpleButton,
-              {
-                title: getLabel("btnAiSend").title,
-                isLoading: actualIsLoading,
-                type: "submit",
-                size: "sm",
-                children: getLabel("btnAiSend").text
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  };
+              ),
+              /* @__PURE__ */ jsxs(Box, { className: "gpt__buttonsContainer", children: [
+                /* @__PURE__ */ jsx(Box, { sx: { display: "none" }, children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "file",
+                    className: "gptUploadFile",
+                    multiple: true,
+                    id: `gptUploadFile__${chatController.id}`,
+                    onChange: (ev) => {
+                      if (1 == noNaN("a"))
+                        handleFileUpload(ev).catch((e) => {
+                          if (e instanceof WrongFormatError) {
+                            setIsLoading(false);
+                            chatController.messages.add(
+                              new ChatMessage(
+                                getLabel("msgAiFileExtensionError").text,
+                                "error"
+                              )
+                            );
+                          } else {
+                            throw e;
+                          }
+                        });
+                      else {
+                        handleFileUploadAsMessage(ev.target, chatController);
+                      }
+                      ev.target.value = "";
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant: "icon-outline",
+                    onClick: () => !chatController.audioRecorder.state.recording ? chatController.audioRecorder.start() : chatController.audioRecorder.stop(),
+                    disabled: actualIsLoading && !chatController.audioRecorder.state.recording,
+                    sx: {
+                      color: chatController.audioRecorder.state.recording ? "red" : void 0
+                    },
+                    icon: chatController.audioRecorder.state.recording ? "Stop" : "Microphone",
+                    id: "transcribeAudio",
+                    size: "Lg",
+                    title: "TODO: MAKE LABEL TRANSCRIBE AUDIO"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    title: getLabel("btnUploadFile").text,
+                    icon: "File",
+                    variant: "icon-outline",
+                    disabled: actualIsLoading,
+                    onClick: () => {
+                      document.getElementById(
+                        `gptUploadFile__${chatController.id}`
+                      ).click();
+                    },
+                    size: "Lg"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SimpleButton,
+                  {
+                    title: getLabel("btnAiPrevious").title,
+                    variant: "outline",
+                    type: "button",
+                    onClick: chatController.history.previous,
+                    size: "sm",
+                    children: getLabel("btnAiPrevious").text
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SimpleButton,
+                  {
+                    title: getLabel("btnAiNext").title,
+                    variant: "outline",
+                    type: "button",
+                    onClick: chatController.history.next,
+                    size: "sm",
+                    children: getLabel("btnAiNext").text
+                  }
+                ),
+                !hideDeleteButton && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    SimpleButton,
+                    {
+                      title: getLabel("btnAiDelete").title,
+                      variant: "outline",
+                      type: "button",
+                      onClick: () => {
+                        chatController.state.current.message = "";
+                        chatController.attachments.dropAll();
+                        chatController.currentHistoryIndex = -1;
+                      },
+                      size: "sm",
+                      children: getLabel("btnAiDelete").text
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SimpleButton,
+                    {
+                      title: getLabel("btnAiDeleteMessages").title,
+                      variant: "outline",
+                      type: "button",
+                      onClick: () => chatController.messages.clear(),
+                      size: "sm",
+                      children: getLabel("btnAiDeleteMessages").text
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  SimpleButton,
+                  {
+                    title: getLabel("btnAiSend").title,
+                    isLoading: actualIsLoading,
+                    type: "submit",
+                    size: "sm",
+                    children: getLabel("btnAiSend").text
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] });
+    }
+  );
   NewTextarea.displayName = "";
   return NewTextarea;
 };
@@ -481,127 +709,148 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var __privateWrapper = (obj, member, setter, getter) => ({
-  set _(value) {
-    __privateSet(obj, member, value, setter);
-  },
-  get _() {
-    return __privateGet(obj, member, getter);
-  }
-});
-var _messages, _promptsHistory, _currentHistoryIndex;
-class ChatController extends EventEmitter {
+var _promptsHistory, _internalAudioRecorder;
+class ChatController {
   constructor(id, welcomeMessage) {
-    super();
     this.id = id;
-    __privateAdd(this, _messages, []);
+    __publicField$1(this, "state", {
+      current: new ChatMessage(),
+      messages: []
+    });
     __publicField$1(this, "components", {
-      MessageHistory: () => {
-        const messages = this.history.useList();
+      MessageHistory: observer(() => {
         return /* @__PURE__ */ jsx(
           Box,
           {
             ...getVariant("layout.common.components.chat"),
             className: "history",
-            children: /* @__PURE__ */ jsx(AutoscrollContainer, { children: messages.map((current) => /* @__PURE__ */ jsx(
-              Box,
-              {
-                as: "pre",
-                className: `history__message ${current.messageType}`,
-                ...typeof current.message === "string" ? { dangerouslySetInnerHTML: { __html: current.message } } : { children: current.message }
-              },
-              current.id
-            )) })
+            children: /* @__PURE__ */ jsx(AutoscrollContainer, { children: this.state.messages.map((current) => /* @__PURE__ */ jsx(current.Component, {}, current.id)) })
           }
         );
-      },
+      }),
       Textarea: makeTextarea(this)
     });
     __privateAdd(this, _promptsHistory, []);
-    __privateAdd(this, _currentHistoryIndex, -1);
+    __publicField$1(this, "currentHistoryIndex", -1);
+    __privateAdd(this, _internalAudioRecorder, new AudioRecorder());
+    __publicField$1(this, "audioRecorder", {
+      start: () => __privateGet(this, _internalAudioRecorder).start().then(async (blob) => {
+        const m = new AIMessageAttachments(
+          AIMessageRole.USER,
+          new AIFileContent(
+            "this is a record from user's voice",
+            await AIFileContent.blobToBase64(blob),
+            `userRecord_${this.audioRecorder.record++}.wav`
+          ),
+          () => this.attachments.drop(m)
+        );
+        this.attachments.add(m);
+      }),
+      stop: async () => {
+        __privateGet(this, _internalAudioRecorder).stop();
+      },
+      record: 0,
+      state: __privateGet(this, _internalAudioRecorder).state
+    });
     __publicField$1(this, "history", {
-      add: (prompt) => {
-        __privateSet(this, _currentHistoryIndex, -1);
-        if (prompt === __privateGet(this, _promptsHistory)[__privateGet(this, _promptsHistory).length]) {
+      add: (message) => {
+        this.currentHistoryIndex = -1;
+        if (message === __privateGet(this, _promptsHistory)[__privateGet(this, _promptsHistory).length]) {
           return;
         }
         __privateSet(this, _promptsHistory, [
-          prompt,
+          message,
           ...__privateGet(this, _promptsHistory).slice(
             Math.max(0, __privateGet(this, _promptsHistory).length - 10)
           )
         ]);
       },
       next: () => {
-        if (__privateGet(this, _promptsHistory)[__privateGet(this, _currentHistoryIndex) - 1])
-          return __privateGet(this, _promptsHistory)[--__privateWrapper(this, _currentHistoryIndex)._];
+        let message = new ChatMessage();
+        if (__privateGet(this, _promptsHistory)[this.currentHistoryIndex - 1])
+          message = __privateGet(this, _promptsHistory)[--this.currentHistoryIndex].copy();
         else {
-          __privateSet(this, _currentHistoryIndex, -1);
-          return "";
+          this.currentHistoryIndex = -1;
         }
+        this.history.updateState(message);
       },
       previous: () => {
-        if (__privateGet(this, _promptsHistory)[__privateGet(this, _currentHistoryIndex) + 1]) {
-          return __privateGet(this, _promptsHistory)[++__privateWrapper(this, _currentHistoryIndex)._];
+        if (__privateGet(this, _promptsHistory)[this.currentHistoryIndex + 1]) {
+          this.history.updateState(
+            __privateGet(this, _promptsHistory)[++this.currentHistoryIndex].copy()
+          );
         }
       },
-      useList: () => {
-        const [messages, setMessages] = useState(__privateGet(this, _messages));
-        useEffect(() => {
-          return this.on("listChange", (messages2) => setMessages(messages2));
-        }, []);
-        return messages;
-      }
+      updateState: (message) => {
+        if (message)
+          this.state.current = message;
+        else
+          this.state.current = new ChatMessage();
+      },
+      size: () => this.state.messages.length
     });
     __publicField$1(this, "messages", {
       add: (message, idx) => {
-        if (idx !== void 0 && idx !== null)
-          __privateGet(this, _messages).splice(idx, 0, message);
-        else
-          __privateGet(this, _messages).push(message);
-        this.emit("listChange", [...__privateGet(this, _messages)]);
+        if (idx !== void 0 && idx !== null) {
+          this.state.messages.splice(idx, 0, message);
+        } else {
+          this.state.messages.push(message);
+        }
       },
       clear: () => {
-        __privateSet(this, _messages, []);
-        this.emit("listChange", []);
+        this.state.messages = [];
       }
     });
-    if (welcomeMessage)
-      __privateGet(this, _messages).splice(0, 0, new ChatMessage(welcomeMessage, "system"));
+    __publicField$1(this, "attachments", {
+      add: (...aiMessage) => {
+        this.state.current.attachments.push(...aiMessage);
+      },
+      dropAll: () => void (this.state.current.attachments = []),
+      drop: (el) => {
+        this.state.current.attachments = this.state.current.attachments.filter(
+          (c) => c !== el
+        );
+        if (!this.state.current.message && this.attachments.size() < 1)
+          this.currentHistoryIndex = -1;
+      },
+      getComponents: () => this.state.current.attachments.map((x) => /* @__PURE__ */ jsx(x.Component, { closeButton: true }, x.id)),
+      get: () => this.state.current.attachments,
+      size: () => this.state.current.attachments.length
+    });
+    if (welcomeMessage) {
+      this.state.messages.splice(
+        0,
+        0,
+        new ChatMessage(welcomeMessage, "system")
+      );
+    }
+    makeObservable(this, { state: observable });
   }
 }
-_messages = new WeakMap();
 _promptsHistory = new WeakMap();
-_currentHistoryIndex = new WeakMap();
+_internalAudioRecorder = new WeakMap();
 
 class MultipleChoiceMessage extends ChatMessage {
   constructor(question, options, Renderer) {
-    super("", "multipleChoice");
-    this.question = question;
-    this.options = options;
-    this.Renderer = Renderer;
-  }
-  get message() {
-    const Renderer = this.Renderer;
-    if (Renderer) {
-      return /* @__PURE__ */ jsxs(Box, { className: "multipleChoiceMessage customRenderer", children: [
-        /* @__PURE__ */ jsx(Paragraph, { children: this.question }),
-        this.options.map((item) => /* @__PURE__ */ jsx(Renderer, { item }, item.url))
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(Box, { className: "multipleChoiceMessage", children: [
-      /* @__PURE__ */ jsx(Paragraph, { children: this.question }),
-      !Renderer && /* @__PURE__ */ jsx(Box, { as: "ul", children: this.options.map((current) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        SimpleButton,
-        {
-          className: "multipleChoice__option",
-          onClick: () => {
-            ApiaUtil.instance.tabs.openTab(current.label, current.url);
-          },
-          children: current.label
-        }
-      ) }, current.label)) })
-    ] });
+    super(
+      Renderer ? /* @__PURE__ */ jsxs(Box, { className: "multipleChoiceMessage customRenderer", children: [
+        /* @__PURE__ */ jsx(Paragraph, { children: question }),
+        options.map((item) => /* @__PURE__ */ jsx(Renderer, { item }, item.url))
+      ] }) : /* @__PURE__ */ jsxs(Box, { className: "multipleChoiceMessage", children: [
+        /* @__PURE__ */ jsx(Paragraph, { children: question }),
+        /* @__PURE__ */ jsx(Box, { as: "ul", children: options.map((current) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          SimpleButton,
+          {
+            className: "multipleChoice__option",
+            onClick: () => {
+              ApiaUtil.instance.tabs.openTab(current.label, current.url);
+            },
+            children: current.label
+          }
+        ) }, current.label)) })
+      ] }),
+      "multipleChoice"
+    );
   }
 }
 
@@ -662,5 +911,5 @@ class ResponseStream extends EventEmitter {
   }
 }
 
-export { ChatController, ChatMessage, MultipleChoiceMessage, ResponseStream };
+export { AIMessageAttachments as AIMessage, AutoscrollContainer, ChatController, ChatMessage, MultipleChoiceMessage, ResponseStream };
 //# sourceMappingURL=index.js.map