@apia/ai 3.0.21 → 3.0.22

package/dist/index.js

@@ -4,10 +4,10 @@ import { useRef, useCallback, useState } from 'react';
 import { IconButton, AutogrowTextarea, ApiaUtil, SimpleButton, SortableList, SortableListItem } from '@apia/components';
 import { getLabel, noNaN, AudioRecorder, EventEmitter } from '@apia/util';
 import { makeObservable, observable, action, toJS, makeAutoObservable } from 'mobx';
+import { observer } from 'mobx-react-lite';
 import { CollectorField, Collector } from '@apia/validations';
 import { uniqueId } from '@apia/notifications';
 import { FileIcon } from '@apia/icons';
-import { observer } from 'mobx-react-lite';
 import axios from 'axios';
 import { makeApiaUrl, parseSuccessfulResponse, ApiaApi } from '@apia/api';
 
@@ -193,42 +193,50 @@ function useHandleFileUpload({
   return { progress, handleFileUpload };
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => {
-  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => {
+  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 let maxId = 0;
 class ChatMessage {
-  constructor(message = "", messageType = "user", attachments = []) {
+  constructor(message = "", messageType = "user", attachments = [], reference = null) {
     this.message = message;
     this.messageType = messageType;
     this.attachments = attachments;
-    __publicField$7(this, "id");
-    __publicField$7(this, "copy", () => new ChatMessage(this.message, this.messageType, this.attachments));
-    __publicField$7(this, "Component", () => {
-      const gapAmount = this.attachments.length > 0 && this.message ? "12px" : "0";
+    this.reference = reference;
+    __publicField$a(this, "id");
+    __publicField$a(this, "clone", () => new ChatMessage(
+      this.message,
+      this.messageType,
+      [...this.attachments],
+      this.reference
+    ));
+    __publicField$a(this, "Component", observer(({ className }) => {
       return /* @__PURE__ */ jsxs(
         Box,
         {
           as: "pre",
-          className: `history__message ${this.messageType}`,
-          sx: { gap: gapAmount },
+          className: `history_message ${className || ""} ${this.messageType}`,
           children: [
             /* @__PURE__ */ jsx(
               Box,
               {
-                className: "text_wrapper",
+                className: "history_message__content",
                 ...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.getId())) })
+            this.attachments.length > 0 && /* @__PURE__ */ jsx(Box, { className: "history_message__attachments", children: this.attachments.map((x) => {
+              const a = x;
+              return /* @__PURE__ */ jsx(a.Component, {}, x.id);
+            }) }),
+            this.reference && /* @__PURE__ */ jsx(Box, { className: "history_message__references", children: this.reference })
           ]
         },
         this.id
       );
-    });
+    }));
     this.id = maxId++;
     if (messageType === "response")
       this.messageType = "system";
@@ -237,7 +245,8 @@ class ChatMessage {
     makeObservable(this, {
       attachments: observable,
       message: observable,
-      messageType: observable
+      messageType: observable,
+      reference: observable
     });
   }
   parseMessage(message) {
@@ -246,21 +255,24 @@ class ChatMessage {
     result = result.replaceAll("[/strong]", "</strong>");
     return result;
   }
+  removeAttachment(idx) {
+    this.attachments = this.attachments.filter((_, i) => i !== idx);
+  }
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => {
-  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class AIContent extends CollectorField {
   constructor(content) {
     super(uniqueId(), "");
-    __publicField$6(this, "type", "aiContent");
-    __publicField$6(this, "content");
+    __publicField$9(this, "type", "aiContent");
+    __publicField$9(this, "content");
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    __publicField$6(this, "Component", (props) => {
+    __publicField$9(this, "Component", (props) => {
       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;
@@ -296,29 +308,30 @@ var AIMessageRole = /* @__PURE__ */ ((AIMessageRole2) => {
   return AIMessageRole2;
 })(AIMessageRole || {});
 
-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);
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const _AIFileContent = class _AIFileContent extends AIContent {
   constructor(fileUrl, fileName, f, error) {
     const extension = _AIFileContent.getExtensionFromFileName(fileName);
     super();
-    __publicField$5(this, "type");
-    __publicField$5(this, "fileUrl");
-    __publicField$5(this, "fileName");
-    __publicField$5(this, "extension");
-    __publicField$5(this, "__file");
-    __publicField$5(this, "__error");
-    __publicField$5(this, "overrideSize");
-    __publicField$5(this, "id", uniqueId());
-    __publicField$5(this, "getId", () => this.id);
-    __publicField$5(this, "inferContent", () => {
+    __publicField$8(this, "type");
+    __publicField$8(this, "fileUrl");
+    __publicField$8(this, "fileName");
+    __publicField$8(this, "extension");
+    __publicField$8(this, "__file");
+    __publicField$8(this, "__error");
+    __publicField$8(this, "overrideSize");
+    __publicField$8(this, "id", uniqueId());
+    __publicField$8(this, "value", "");
+    __publicField$8(this, "getId", () => this.id);
+    __publicField$8(this, "inferContent", () => {
       return `You must collect information contained in this ${this.type} as help to build your tool choice.`;
     });
-    __publicField$5(this, "inferExtension", (extension) => {
+    __publicField$8(this, "inferExtension", (extension) => {
       switch (extension) {
         case AIFileContentAllowedExtensions.jpg:
         case AIFileContentAllowedExtensions.jpeg:
@@ -346,7 +359,7 @@ const _AIFileContent = class _AIFileContent extends AIContent {
       }
     });
     // COMPONENT METHODS
-    __publicField$5(this, "Component", (props) => {
+    __publicField$8(this, "Component", (props) => {
       return /* @__PURE__ */ jsx(
         Box,
         {
@@ -457,12 +470,12 @@ ${Object.keys(AIFileContentAllowedExtensions)}`;
   }
 };
 // STATIC METHODS
-__publicField$5(_AIFileContent, "isValidExtension", (extension) => {
+__publicField$8(_AIFileContent, "isValidExtension", (extension) => {
   return Object.values(
     AIFileContentAllowedExtensions
   ).includes(extension);
 });
-__publicField$5(_AIFileContent, "blobToBase64", async (blob) => {
+__publicField$8(_AIFileContent, "blobToBase64", async (blob) => {
   return await ((blob2) => new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onloadend = () => {
@@ -473,7 +486,7 @@ __publicField$5(_AIFileContent, "blobToBase64", async (blob) => {
     reader.readAsDataURL(blob2);
   }))(blob);
 });
-__publicField$5(_AIFileContent, "fromFile", async (f, error) => {
+__publicField$8(_AIFileContent, "fromFile", async (f, error) => {
   const fileUrl = await ((f2) => new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(f2);
@@ -484,21 +497,23 @@ __publicField$5(_AIFileContent, "fromFile", async (f, error) => {
 });
 let AIFileContent = _AIFileContent;
 
-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);
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class AIMessageAttachments {
   constructor(role, content, close) {
     this.close = close;
-    __publicField$4(this, "role");
-    __publicField$4(this, "content");
-    __publicField$4(this, "id", uniqueId());
-    __publicField$4(this, "customDescription", false);
-    __publicField$4(this, "getId", () => this.id);
-    __publicField$4(this, "addDescription", async () => {
+    __publicField$7(this, "role");
+    __publicField$7(this, "content");
+    __publicField$7(this, "id", uniqueId());
+    __publicField$7(this, "customDescription", false);
+    __publicField$7(this, "getId", () => this.id);
+    __publicField$7(this, "name", this.id);
+    __publicField$7(this, "value", "");
+    __publicField$7(this, "addDescription", async () => {
       const collector = new Collector();
       const collected = await collector.add(this.content).add(
         new collector.fields.textarea(
@@ -522,7 +537,7 @@ class AIMessageAttachments {
         this.customDescription = false;
       }
     });
-    __publicField$4(this, "Component", (props) => /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.components.aiMessage"), children: /* @__PURE__ */ jsx(
+    __publicField$7(this, "Component", (props) => /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.components.aiMessage"), children: /* @__PURE__ */ jsx(
       this.content.Component,
       {
         onClose: props.closeButton ? this.close : void 0,
@@ -558,9 +573,6 @@ const handleFileUploadAsMessage = async (fileInputElement, chatController) => {
   }
 };
 
-function isMobile() {
-  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
-}
 const makeTextarea = (chatController) => {
   const NewTextarea = observer(
     ({
@@ -637,6 +649,7 @@ const makeTextarea = (chatController) => {
         ev.preventDefault();
         setDragging(true);
       };
+      const inputFileRef = useRef(null);
       const additionalButtons = [];
       additionalButtons.push({
         key: "prev",
@@ -665,20 +678,6 @@ const makeTextarea = (chatController) => {
           children: getLabel("btnAiDeleteMessages").text
         });
       }
-      if (isMobile()) {
-        additionalButtons.push({
-          key: "camera",
-          children: getLabel("btnOpenMobileCamera").text,
-          onClick: () => {
-            const gptUploadFile = document.getElementById(
-              `gptUploadFile__${chatController.id}`
-            );
-            if (gptUploadFile) {
-              gptUploadFile.click();
-            }
-          }
-        });
-      }
       return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", width: "100%" }, children: [
         /* @__PURE__ */ jsx(
           Box,
@@ -692,6 +691,7 @@ const makeTextarea = (chatController) => {
               paddingBottom: "6px",
               gap: spacing(3)
             },
+            ...getVariant("layout.common.chat.attachments"),
             children: chatController.attachments.getComponents()
           }
         ),
@@ -805,9 +805,9 @@ const makeTextarea = (chatController) => {
                     variant: "icon-outline",
                     isLoading: actualIsLoading,
                     onClick: () => {
-                      document.getElementById(
-                        `gptUploadFile__${chatController.id}`
-                      ).click();
+                      if (inputFileRef.current) {
+                        inputFileRef.current.click();
+                      }
                     },
                     icon: "Attach",
                     id: "fileUpload",
@@ -835,9 +835,10 @@ const makeTextarea = (chatController) => {
                 "input",
                 {
                   type: "file",
+                  ref: inputFileRef,
                   className: "gptUploadFile",
                   multiple: true,
-                  capture: isMobile() ? "environment" : void 0,
+                  accept: "image/*",
                   id: `gptUploadFile__${chatController.id}`,
                   onChange: (ev) => {
                     if (1 == noNaN("a"))
@@ -871,10 +872,10 @@ const makeTextarea = (chatController) => {
   return NewTextarea;
 };
 
-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);
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck = (obj, member, msg) => {
@@ -899,22 +900,22 @@ var _promptsHistory, _internalAudioRecorder;
 class ChatController {
   constructor(id, welcomeMessage) {
     this.id = id;
-    __publicField$3(this, "state", {
+    __publicField$6(this, "state", {
       current: new ChatMessage(),
       messages: []
     });
-    __publicField$3(this, "components", {
+    __publicField$6(this, "components", {
       MessageHistory: observer(() => {
         return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.chat.history"), className: "history", children: /* @__PURE__ */ jsx(AutoscrollContainer, { children: this.state.messages.map((current) => /* @__PURE__ */ jsx(current.Component, {}, current.id)) }) });
       }),
       Textarea: makeTextarea(this)
     });
     __privateAdd(this, _promptsHistory, []);
-    __publicField$3(this, "currentHistoryIndex", -1);
+    __publicField$6(this, "currentHistoryIndex", -1);
     __privateAdd(this, _internalAudioRecorder, new AudioRecorder());
-    __publicField$3(this, "audioBlob", new Promise(() => {
+    __publicField$6(this, "audioBlob", new Promise(() => {
     }));
-    __publicField$3(this, "audioRecorder", {
+    __publicField$6(this, "audioRecorder", {
       start: () => {
         this.audioBlob = __privateGet(this, _internalAudioRecorder).start();
       },
@@ -936,7 +937,7 @@ class ChatController {
       record: 0,
       state: __privateGet(this, _internalAudioRecorder).state
     });
-    __publicField$3(this, "history", {
+    __publicField$6(this, "history", {
       add: (message) => {
         this.currentHistoryIndex = -1;
         if (message === __privateGet(this, _promptsHistory)[__privateGet(this, _promptsHistory).length]) {
@@ -952,7 +953,7 @@ class ChatController {
       next: () => {
         let message = new ChatMessage();
         if (__privateGet(this, _promptsHistory)[this.currentHistoryIndex - 1])
-          message = __privateGet(this, _promptsHistory)[--this.currentHistoryIndex].copy();
+          message = __privateGet(this, _promptsHistory)[--this.currentHistoryIndex].clone();
         else {
           this.currentHistoryIndex = -1;
         }
@@ -961,7 +962,7 @@ class ChatController {
       previous: () => {
         if (__privateGet(this, _promptsHistory)[this.currentHistoryIndex + 1]) {
           this.history.updateState(
-            __privateGet(this, _promptsHistory)[++this.currentHistoryIndex].copy()
+            __privateGet(this, _promptsHistory)[++this.currentHistoryIndex].clone()
           );
         }
       },
@@ -973,7 +974,7 @@ class ChatController {
       },
       size: () => this.state.messages.length
     });
-    __publicField$3(this, "messages", {
+    __publicField$6(this, "messages", {
       add: (message, idx) => {
         if (idx !== void 0 && idx !== null) {
           this.state.messages.splice(idx, 0, message);
@@ -985,7 +986,7 @@ class ChatController {
         this.state.messages = [];
       }
     });
-    __publicField$3(this, "attachments", {
+    __publicField$6(this, "attachments", {
       add: (...aiMessage) => {
         this.state.current.attachments.push(...aiMessage);
       },
@@ -997,7 +998,10 @@ class ChatController {
         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, canAddDescription: true }, x.getId())),
+      getComponents: () => this.state.current.attachments.map((x) => {
+        const c = x;
+        return /* @__PURE__ */ jsx(c.Component, { closeButton: true, canAddDescription: true }, x.id);
+      }),
       get: () => this.state.current.attachments,
       size: () => this.state.current.attachments.length
     });
@@ -1038,6 +1042,673 @@ class MultipleChoiceMessage extends ChatMessage {
   }
 }
 
+const FileAttachment = observer(
+  ({
+    attachment,
+    onRemove
+  }) => {
+    return /* @__PURE__ */ jsxs(Box, { className: "file_box", children: [
+      /* @__PURE__ */ jsx(FileIcon, { className: "file_box__icon", docName: attachment.name }),
+      /* @__PURE__ */ jsx(Box, { className: "file_box__name", title: attachment.name, children: attachment.name }),
+      onRemove && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: "Close",
+          className: "file_box__remove",
+          onClick: onRemove,
+          variant: "icon-only"
+        }
+      )
+    ] });
+  }
+);
+
+const Attachments = observer(
+  ({
+    attachments,
+    onRemove
+  }) => {
+    if (!attachments.length)
+      return null;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "attachments",
+        ...getVariant("layout.common.newChat.attachments"),
+        children: attachments.map((x) => /* @__PURE__ */ jsx(
+          FileAttachment,
+          {
+            attachment: x,
+            onRemove: onRemove ? () => onRemove(x) : void 0
+          },
+          x.id
+        ))
+      }
+    );
+  }
+);
+
+const Message = observer(
+  ({
+    className,
+    type,
+    id,
+    message,
+    attachments,
+    reference
+  }) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: "pre",
+        className: `history_message ${className || ""} ${type}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "history_message__content",
+              ...typeof message === "string" ? { dangerouslySetInnerHTML: { __html: message } } : { children: message }
+            }
+          ),
+          attachments.length > 0 && /* @__PURE__ */ jsx(Attachments, { attachments }),
+          reference && /* @__PURE__ */ jsx(Box, { className: "history_message__references", children: reference })
+        ]
+      },
+      id
+    );
+  }
+);
+
+const History = observer(({ messages }) => {
+  let currentType = "";
+  return /* @__PURE__ */ jsx(AutoscrollContainer, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...getVariant("layout.common.newChat.history"),
+      className: "chat_history",
+      children: messages.map((current, i) => {
+        let first = false;
+        let last = false;
+        if (currentType !== current.messageType) {
+          currentType = current.messageType;
+          first = true;
+        }
+        if (i === messages.length - 1 || messages[i + 1].messageType !== current.messageType) {
+          last = true;
+        }
+        return /* @__PURE__ */ jsx(
+          Message,
+          {
+            className: first ? "first" : last ? "last" : void 0,
+            type: current.messageType,
+            id: String(current.id),
+            attachments: current.attachments,
+            reference: current.reference,
+            message: current.message
+          }
+        );
+      })
+    }
+  ) });
+});
+
+function getBase64FromFile(f) {
+  return ((f2) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(f2);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject();
+  }))(f);
+}
+function getBase64FromBlob(b) {
+  return ((blob) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const base64String = reader.result;
+      resolve(base64String);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  }))(b);
+}
+
+const TextArea = observer(
+  ({
+    isLoading,
+    isRecording,
+    onSubmit,
+    onChange,
+    onClearHistory,
+    onClearAttachments,
+    onClearMessage,
+    onAttach,
+    onRecord,
+    onVideoRecord,
+    onPrev,
+    onNext,
+    hideDeleteButton,
+    value,
+    id
+  }) => {
+    const fileInputRef = useRef(null);
+    const searchControlsRef = useRef(null);
+    const recordButton = /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "icon-only",
+        onClick: onRecord,
+        disabled: isLoading && !isRecording,
+        sx: {
+          color: isRecording ? "red" : void 0
+        },
+        icon: isRecording ? "Stop" : "Microphone",
+        id: "transcribeAudio",
+        iconSize: "Sm",
+        title: getLabel("lblAiRecordAudio").text
+      }
+    );
+    const handleAttachments = async (ev) => {
+      if (ev.target.files) {
+        for await (const f of ev.target.files) {
+          const base64 = await getBase64FromFile(f);
+          onAttach({
+            value: base64,
+            name: f.name,
+            id: f.name
+          });
+        }
+      }
+    };
+    const iconsList = [
+      {
+        icon: "ArrowLeft",
+        children: getLabel("btnAiPrevious").text,
+        title: getLabel("btnAiPrevious").text,
+        onClick: onPrev,
+        key: "0"
+      },
+      {
+        icon: "ArrowRight",
+        children: getLabel("btnAiNext").text,
+        title: getLabel("btnAiNext").text,
+        onClick: onNext,
+        key: "1"
+      },
+      {
+        children: getLabel("btnUpload").text,
+        title: getLabel("btnUpload").text,
+        icon: "File",
+        onClick: () => fileInputRef.current?.click(),
+        key: "2"
+      },
+      {
+        title: getLabel("lblOpenCamera").text,
+        children: getLabel("lblOpenCamera").text,
+        icon: "Camera",
+        onClick: onVideoRecord,
+        key: "3"
+      },
+      {
+        title: getLabel("lblAiRecordAudio").text,
+        children: getLabel("lblAiRecordAudio").text,
+        key: "4",
+        onClick: (event) => onRecord(event),
+        icon: isRecording ? "Stop" : "Microphone"
+      },
+      ...hideDeleteButton ? [] : [
+        {
+          icon: "Trash",
+          onClick: onClearHistory,
+          key: "5",
+          children: getLabel("btnAiDeleteMessages").text,
+          title: getLabel("btnAiDeleteMessages").text
+        },
+        {
+          icon: "Erase",
+          title: getLabel("btnAiDelete").text,
+          children: getLabel("btnAiDelete").text,
+          onClick: () => {
+            onClearMessage();
+            onClearAttachments();
+          },
+          key: "6"
+        }
+      ]
+    ];
+    return /* @__PURE__ */ jsxs(
+      Form,
+      {
+        id,
+        onSubmit: (ev) => {
+          ev.preventDefault();
+          onSubmit();
+        },
+        className: "search_controls",
+        ...getVariant("layout.common.newChat.form"),
+        children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: searchControlsRef,
+              "aria-label": (
+                /** TODO: Crear etiqueta para búsqueda */
+                "Frase de b\xFAsqueda"
+              ),
+              value,
+              className: "searchTextArea",
+              onChange: (ev) => onChange(ev.target.value),
+              onKeyDown: (ev) => {
+                if (ev.code === "Enter" && !ev.shiftKey) {
+                  ev.preventDefault();
+                  ev.target.closest("form").querySelector('[type="submit"]').click();
+                }
+              }
+            }
+          ),
+          isRecording && recordButton,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              id: "invisible__attach__file",
+              type: "file",
+              multiple: true,
+              onChange: handleAttachments,
+              sx: { display: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              disabled: isLoading,
+              icon: "Ellipsis",
+              variant: "icon-only",
+              iconSize: "Sm",
+              onClick: (ev) => {
+                ApiaUtil.instance.menu.open({
+                  menuProps: {
+                    anchorPoint: { x: ev.clientX, y: ev.clientY }
+                  },
+                  items: iconsList
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "SearchButton",
+              isLoading,
+              icon: "ArrowRight",
+              variant: "icon-only",
+              iconSize: "Sm",
+              title: getLabel("btnBus").title,
+              type: "submit"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+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;
+};
+class CameraController {
+  constructor() {
+    __publicField$5(this, "state", {
+      videoStream: null,
+      isOpen: false
+    });
+    __publicField$5(this, "currentCapture", null);
+    __publicField$5(this, "videoElement");
+    __publicField$5(this, "Component", () => {
+      return /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: (el) => {
+            if (el) {
+              el.srcObject = this.videoElement.srcObject;
+              el.autoplay = true;
+              el.playsInline = true;
+            }
+          },
+          style: { width: "100%", height: "auto" }
+        }
+      );
+    });
+    makeObservable(this, {
+      state: observable,
+      openCamera: action,
+      closeCamera: action
+    });
+    this.videoElement = document.createElement("video");
+    this.videoElement.autoplay = true;
+    this.videoElement.playsInline = true;
+  }
+  async openCamera() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      this.state.videoStream = stream;
+      this.videoElement.srcObject = stream;
+      this.state.isOpen = true;
+      ApiaUtil.instance.modals.open({
+        children: /* @__PURE__ */ jsx(this.Component, {}),
+        onConfirm: () => {
+          this.closeCamera();
+        },
+        onClose: () => {
+          this.state.isOpen = false;
+          this.closeCamera();
+        }
+      });
+    } catch (error) {
+      console.error("Error while accessing the camera:", error);
+      this.state.isOpen = false;
+      this.closeCamera();
+    }
+  }
+  async closeCamera() {
+    if (!this.videoElement.srcObject)
+      return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = this.videoElement.videoWidth;
+    canvas.height = this.videoElement.videoHeight;
+    const ctx = canvas.getContext("2d");
+    if (ctx)
+      ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
+    this.currentCapture = await new Promise((resolve) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const file = new File([blob], "captured_image.jpg", {
+            type: "image/jpeg"
+          });
+          resolve(file);
+        } else {
+          resolve(null);
+        }
+      }, "image/jpeg");
+    }).finally(() => {
+      this.state.videoStream?.getTracks().forEach((track) => track.stop());
+      this.state.videoStream = null;
+      this.videoElement.srcObject = null;
+      this.state.isOpen = false;
+    });
+  }
+  pop() {
+    const returnFile = this.currentCapture;
+    this.currentCapture = null;
+    return returnFile;
+  }
+}
+
+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 ChatController2 {
+  constructor(props, onMessageSubmit, id, onMessageResponse) {
+    this.onMessageSubmit = onMessageSubmit;
+    this.id = id;
+    this.onMessageResponse = onMessageResponse;
+    __publicField$4(this, "currentIndex", 0);
+    __publicField$4(this, "state", {
+      isVisible: false,
+      isLoading: false,
+      canRecord: true,
+      canAttach: true,
+      canAddSystemMessage: true,
+      canAddUserMessage: true,
+      canShowSystemMessage: true,
+      canShowUserMessage: true,
+      hideDeleteButton: false,
+      maxAttachmentsSize: 100,
+      messages: [],
+      currentMessage: new ChatMessage("", "user")
+    });
+    __publicField$4(this, "internalAudioRecorder", new AudioRecorder());
+    __publicField$4(this, "internalCameraRecorder", new CameraController());
+    __publicField$4(this, "maxId", 0);
+    __publicField$4(this, "audioRecorder", {
+      start: () => {
+        this.internalAudioRecorder.start().then(async (blob) => {
+          this.state.currentMessage.attachments.push({
+            id: String(this.maxId++),
+            name: `userRecord_${this.audioRecorder.record++}.wav`,
+            value: await getBase64FromBlob(blob)
+          });
+        });
+      },
+      stop: async () => {
+        this.internalAudioRecorder.stop();
+      },
+      record: 0,
+      state: this.internalAudioRecorder.state
+    });
+    __publicField$4(this, "History", observer(() => /* @__PURE__ */ jsx(History, { messages: this.state.messages })));
+    __publicField$4(this, "Attachments", observer(() => /* @__PURE__ */ jsx(
+      Attachments,
+      {
+        attachments: this.state.currentMessage.attachments,
+        onRemove: (a) => {
+          this.removeAttachment(a);
+        }
+      }
+    )));
+    __publicField$4(this, "TextArea", observer(() => /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        id: this.id,
+        value: this.state.currentMessage.message,
+        isLoading: this.state.isLoading,
+        isRecording: this.internalAudioRecorder.state.recording,
+        onChange: (ev) => {
+          this.state.currentMessage.message = ev;
+        },
+        onSubmit: async () => {
+          if (this.state.currentMessage.message || this.state.currentMessage.attachments.length > 0) {
+            this.state.isLoading = true;
+            if (this.state.canAddUserMessage) {
+              this.addMessage(this.state.currentMessage);
+            }
+            const response = await this.onMessageSubmit({
+              message: this.state.currentMessage
+            });
+            if (this.onMessageResponse) {
+              await this.onMessageResponse(response);
+            }
+            this.state.isLoading = false;
+            if (this.state.canAddSystemMessage && response.responseMessage) {
+              this.addMessage(response.responseMessage);
+            }
+            this.state.currentMessage = new ChatMessage("", "user");
+          }
+        },
+        onClearHistory: () => {
+          this.clearHistory();
+        },
+        onClearAttachments: () => {
+          this.state.currentMessage.attachments = [];
+        },
+        onClearMessage: () => {
+          this.clearMessage();
+        },
+        onAttach: async (ev) => {
+          this.state.currentMessage.attachments.push({
+            ...ev,
+            id: String(this.maxId++)
+          });
+        },
+        onRecord: () => {
+          !this.internalAudioRecorder.state.recording ? this.audioRecorder.start() : this.audioRecorder.stop();
+        },
+        onVideoRecord: async () => {
+          !this.internalCameraRecorder.state.isOpen && await this.internalCameraRecorder.openCamera();
+          await new Promise((resolve, _) => {
+            const checkCapture = async () => {
+              if (!this.internalCameraRecorder.state.isOpen) {
+                const capture = this.internalCameraRecorder.pop();
+                if (capture) {
+                  this.state.currentMessage.attachments.push({
+                    id: String(this.maxId++),
+                    name: capture.name,
+                    value: await getBase64FromFile(capture)
+                  });
+                  return resolve();
+                }
+              } else {
+                requestAnimationFrame(checkCapture);
+              }
+            };
+            checkCapture();
+          });
+        },
+        onPrev: () => {
+          this.prevMessage();
+        },
+        onNext: () => {
+          this.nextMessage();
+        },
+        hideDeleteButton: this.state.hideDeleteButton,
+        attachments: []
+      }
+    )));
+    __publicField$4(this, "Renderer", () => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...getVariant("layout.common.chat.controller"),
+        className: "chat_controller",
+        children: [
+          /* @__PURE__ */ jsx(this.History, {}),
+          /* @__PURE__ */ jsx(this.Attachments, {}),
+          /* @__PURE__ */ jsx(this.TextArea, {})
+        ]
+      }
+    ));
+    this.state = Object.assign({}, this.state, props);
+    makeObservable(this, { state: observable });
+  }
+  removeMessage(idx) {
+    this.state.messages = this.state.messages.filter((_, i) => i !== idx);
+  }
+  addMessage(message) {
+    this.state.messages.push(message);
+  }
+  clearHistory() {
+    this.state.messages = [];
+  }
+  clearMessage() {
+    this.state.currentMessage = new ChatMessage("", "user");
+  }
+  removeAttachment(attachment) {
+    this.state.currentMessage.attachments = this.state.currentMessage.attachments.filter((x) => x !== attachment);
+  }
+  isValidToShow(message) {
+    return message && (message.messageType === "system" && this.state.canShowSystemMessage || message.messageType === "user" && this.state.canShowUserMessage);
+  }
+  nextMessage() {
+    let newCurrentMessage = void 0;
+    let i = this.currentIndex;
+    const n = this.state.messages.length;
+    if (n === 0) {
+      return;
+    }
+    while (!newCurrentMessage) {
+      if (i === -1 || i === n - 1) {
+        newCurrentMessage = this.state.messages[0];
+        i = 0;
+      } else if (i < n - 1) {
+        newCurrentMessage = this.state.messages[i + 1];
+        i++;
+      }
+      if (this.isValidToShow(newCurrentMessage)) {
+        this.state.currentMessage = newCurrentMessage.clone();
+        break;
+      } else {
+        newCurrentMessage = void 0;
+      }
+      if (i === this.currentIndex) {
+        break;
+      }
+    }
+    this.currentIndex = i;
+  }
+  prevMessage() {
+    let newCurrentMessage = void 0;
+    let i = this.currentIndex;
+    const n = this.state.messages.length;
+    if (n === 0) {
+      return;
+    }
+    while (!newCurrentMessage) {
+      if (i === -1 || i === 0) {
+        newCurrentMessage = this.state.messages[n - 1];
+        i = n - 1;
+      } else if (i > 0) {
+        newCurrentMessage = this.state.messages[i - 1];
+        i--;
+      }
+      if (this.isValidToShow(newCurrentMessage)) {
+        this.state.currentMessage = newCurrentMessage.clone();
+        break;
+      } else {
+        newCurrentMessage = void 0;
+      }
+      if (i === this.currentIndex) {
+        break;
+      }
+    }
+    this.currentIndex = i;
+  }
+}
+
+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;
+};
+class FloatingChatController extends ChatController2 {
+  constructor(props, onMessageSubmit, id, onMessageResponse) {
+    super(props, onMessageSubmit, id, onMessageResponse);
+    __publicField$3(this, "Window", observer(() => {
+      return /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: "Magic",
+          size: "Md",
+          variant: "icon-outline",
+          onClick: () => {
+            this.state.isVisible = true;
+            this.open();
+          }
+        }
+      );
+    }));
+    makeObservable({ open: action });
+  }
+  open() {
+    ApiaUtil.instance.modals.open({
+      variant: "layout.common.chat.assistant.floatingAssistant",
+      defaultPosition: {
+        bottom: "10px",
+        right: "50px"
+      },
+      draggable: true,
+      children: /* @__PURE__ */ jsx(this.Renderer, {}),
+      onClose: () => {
+        this.state.isVisible = false;
+      }
+    });
+  }
+}
+
 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) => {
@@ -1504,5 +2175,5 @@ function getImagesWithDescription({
   });
 }
 
-export { AIMessageAttachments, AutoscrollContainer, ChatController, ChatMessage, DashboardsRoutinesGeneration, MultipleChoiceMessage, ResponseStream, RoutinesGeneration, getImageFromDisk, getImagesFromDisk, getImagesWithDescription };
+export { AIFileContent, AIMessageAttachments, AutoscrollContainer, ChatController, ChatController2, ChatMessage, DashboardsRoutinesGeneration, FloatingChatController, MultipleChoiceMessage, ResponseStream, RoutinesGeneration, getImageFromDisk, getImagesFromDisk, getImagesWithDescription };
 //# sourceMappingURL=index.js.map