@apia/ai 3.0.18 → 3.0.21

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
-import { Box, getVariant, useBreakpointIndex, Textarea, Paragraph } from '@apia/theme';
+import { Box, getVariant, spacing, Close, Form, Paragraph, Textarea } from '@apia/theme';
 import { useRef, useCallback, useState } from 'react';
-import { IconButton, SimpleButton, ApiaUtil, SortableList, SortableListItem } from '@apia/components';
+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 { CollectorField, Collector } from '@apia/validations';
@@ -208,11 +208,13 @@ class ChatMessage {
     __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";
       return /* @__PURE__ */ jsxs(
         Box,
         {
           as: "pre",
           className: `history__message ${this.messageType}`,
+          sx: { gap: gapAmount },
           children: [
             /* @__PURE__ */ jsx(
               Box,
@@ -221,7 +223,7 @@ class ChatMessage {
                 ...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)) })
+            /* @__PURE__ */ jsx(Box, { className: "additionalContent_wrapper", children: this.attachments.map((x) => /* @__PURE__ */ jsx(x.Component, {}, x.getId())) })
           ]
         },
         this.id
@@ -257,7 +259,8 @@ class AIContent extends CollectorField {
     super(uniqueId(), "");
     __publicField$6(this, "type", "aiContent");
     __publicField$6(this, "content");
-    __publicField$6(this, "Component", () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    __publicField$6(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;
@@ -269,6 +272,7 @@ const AIFileContentAllowedExtensions = {
   png: "png",
   jpg: "jpg",
   jpeg: "jpeg",
+  webp: "webp",
   txt: "txt",
   doc: "doc",
   pdf: "pdf",
@@ -309,6 +313,8 @@ const _AIFileContent = class _AIFileContent extends AIContent {
     __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", () => {
       return `You must collect information contained in this ${this.type} as help to build your tool choice.`;
     });
@@ -318,6 +324,7 @@ const _AIFileContent = class _AIFileContent extends AIContent {
         case AIFileContentAllowedExtensions.jpeg:
         case AIFileContentAllowedExtensions.png:
         case AIFileContentAllowedExtensions.svg:
+        case AIFileContentAllowedExtensions.webp:
           return FileType.IMAGE;
         case AIFileContentAllowedExtensions.txt:
         case AIFileContentAllowedExtensions.doc:
@@ -339,33 +346,80 @@ const _AIFileContent = class _AIFileContent extends AIContent {
       }
     });
     // COMPONENT METHODS
-    __publicField$5(this, "Component", () => /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          ...this.overrideSize ? {
-            ...this.overrideSize,
-            img: {
-              width: `${this.overrideSize.width - 20}px`,
-              height: `${this.overrideSize.height - 61}px`
-            }
-          } : {}
-        },
-        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(
+    __publicField$5(this, "Component", (props) => {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            ...this.overrideSize ? {
+              ...this.overrideSize,
+              img: {
+                width: `${this.overrideSize.width - 20}px`,
+                height: `${this.overrideSize.height - 61}px`
+              }
+            } : {}
+          },
+          children: /* @__PURE__ */ jsxs(
             Box,
             {
-              as: "p",
-              variant: "layout.common.components.aiMessage.fileName",
+              ...props,
               title: this.fileName,
-              children: this.fileName
+              className: `labelBox ${props?.className ?? ""}`,
+              variant: "layout.common.boxes.labelBox",
+              children: [
+                /* @__PURE__ */ jsxs(Box, { className: "labelAndIcon", as: "span", children: [
+                  FileType.IMAGE === this.type ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: URL.createObjectURL(this.file),
+                      alt: this.fileName,
+                      style: {
+                        maxWidth: "20px",
+                        maxHeight: "20px",
+                        height: "auto",
+                        width: "auto"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx(FileIcon, { iconSize: "sm", docName: this.fileName }),
+                  this.fileName
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: spacing(2) }, children: [
+                  props?.onEdit !== void 0 ? /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: "Edit",
+                      variant: "icon-outline",
+                      size: "Md",
+                      onClick: props.onEdit
+                    }
+                  ) : null,
+                  props?.onClose !== void 0 ? /* @__PURE__ */ jsx(
+                    Close,
+                    {
+                      type: "button",
+                      className: "closeButton",
+                      size: "Sm",
+                      onClick: props.onClose,
+                      disabled: !props.onClose,
+                      title: getLabel("lblDeleteItem").text,
+                      variant: "icon-outline-danger",
+                      sx: {
+                        "&.closeButton": {
+                          position: "inherit",
+                          fontSize: "22px",
+                          height: "22px",
+                          width: "22px"
+                        }
+                      }
+                    }
+                  ) : null
+                ] })
+              ]
             }
           )
-        ]
-      }
-    ));
+        }
+      );
+    });
     this.__error = error;
     if (!_AIFileContent.isValidExtension(extension))
       this.__throwError(
@@ -443,6 +497,7 @@ class AIMessageAttachments {
     __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 () => {
       const collector = new Collector();
       const collected = await collector.add(this.content).add(
@@ -467,28 +522,13 @@ class AIMessageAttachments {
         this.customDescription = false;
       }
     });
-    __publicField$4(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, {}),
-      props?.canAddDescription ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: "descriptionButton",
-          size: "Md",
-          icon: "Magic",
-          onClick: this.addDescription
-        }
-      ) : /* @__PURE__ */ jsx(Fragment, {}),
-      /* @__PURE__ */ jsx(this.content.Component, {})
-    ] }));
+    __publicField$4(this, "Component", (props) => /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.components.aiMessage"), children: /* @__PURE__ */ jsx(
+      this.content.Component,
+      {
+        onClose: props.closeButton ? this.close : void 0,
+        onEdit: props?.canAddDescription ? this.addDescription : void 0
+      }
+    ) }));
     this.role = role;
     this.content = content;
   }
@@ -518,6 +558,9 @@ const handleFileUploadAsMessage = async (fileInputElement, chatController) => {
   }
 };
 
+function isMobile() {
+  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+}
 const makeTextarea = (chatController) => {
   const NewTextarea = observer(
     ({
@@ -527,7 +570,6 @@ const makeTextarea = (chatController) => {
       preventAppendUserMessages
     }) => {
       const [isLoading, setIsLoading] = useState(false);
-      const breakpoint = useBreakpointIndex();
       const submit = useCallback(() => {
         if (preventAppendUserMessages !== true)
           chatController.messages.add(chatController.state.current);
@@ -537,8 +579,14 @@ const makeTextarea = (chatController) => {
           chatController.state.current = new ChatMessage();
         });
       }, [onSubmit, preventAppendUserMessages]);
+      const recordingAttachHandler = async () => {
+        if (chatController.audioRecorder.state.recording) {
+          chatController.audioRecorder.stop();
+          await chatController.audioRecorder.attach();
+        }
+      };
       const handleSubmit = useCallback(
-        (ev) => {
+        async (ev) => {
           ev.preventDefault();
           if (chatController.state.current.message || chatController.attachments.size() > 0) {
             setIsLoading(true);
@@ -554,7 +602,7 @@ const makeTextarea = (chatController) => {
       const onKeyDown = useCallback((ev) => {
         if (ev.target.readOnly)
           return;
-        if (ev.code === "Enter" && !ev.shiftKey) {
+        if (["NumpadEnter", "Enter"].includes(ev.code) && !ev.shiftKey) {
           ev.preventDefault();
           ev.target.closest("form")?.querySelector('button[type="submit"]')?.click();
         }
@@ -592,91 +640,44 @@ const makeTextarea = (chatController) => {
       const additionalButtons = [];
       additionalButtons.push({
         key: "prev",
-        children: /* @__PURE__ */ jsx(
-          SimpleButton,
-          {
-            title: getLabel("btnAiPrevious").title,
-            variant: "outline",
-            type: "button",
-            onClick: chatController.history.previous,
-            size: "sm",
-            children: getLabel("btnAiPrevious").text
-          }
-        )
+        children: getLabel("btnAiPrevious").text,
+        onClick: chatController.history.previous
       });
       additionalButtons.push({
         key: "next",
-        children: /* @__PURE__ */ jsx(
-          SimpleButton,
-          {
-            title: getLabel("btnAiNext").title,
-            variant: "outline",
-            type: "button",
-            onClick: chatController.history.next,
-            size: "sm",
-            children: getLabel("btnAiNext").text
-          }
-        )
+        children: getLabel("btnAiNext").text,
+        onClick: chatController.history.next
       });
       if (!hideDeleteButton) {
         additionalButtons.push({
           key: "delete",
-          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
-            }
-          )
+          children: getLabel("btnAiDelete").text,
+          onClick: () => {
+            chatController.state.current.message = "";
+            chatController.audioRecorder.stop();
+            chatController.attachments.dropAll();
+            chatController.currentHistoryIndex = -1;
+          }
         });
         additionalButtons.push({
           key: "deleteMessages",
-          children: /* @__PURE__ */ jsx(
-            SimpleButton,
-            {
-              title: getLabel("btnAiDeleteMessages").title,
-              variant: "outline",
-              type: "button",
-              onClick: () => chatController.messages.clear(),
-              size: "sm",
-              children: getLabel("btnAiDeleteMessages").text
-            }
-          )
+          onClick: () => chatController.messages.clear(),
+          children: getLabel("btnAiDeleteMessages").text
         });
       }
-      const isPhone = breakpoint < 4;
-      let iconButton = /* @__PURE__ */ jsx(Fragment, {});
-      if (isPhone) {
-        iconButton = /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            ...getVariant("layout.ai.execution.formsAssistant.settingsButton"),
-            iconSize: "Md",
-            size: "Lg",
-            icon: "Ellipsis",
-            isLoading: actualIsLoading,
-            onClick: () => {
-              const util = ApiaUtil.instance;
-              const items = [];
-              items.push(...additionalButtons);
-              if (items.length > 0)
-                util.menu.open({
-                  menuProps: {
-                    anchorPoint: { x: util.mouse.x, y: util.mouse.y }
-                  },
-                  items
-                });
+      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(
@@ -688,21 +689,27 @@ const makeTextarea = (chatController) => {
               maxHeight: "280px",
               overflowY: "auto",
               paddingTop: "6px",
-              paddingBottom: "6px"
+              paddingBottom: "6px",
+              gap: spacing(3)
             },
             children: chatController.attachments.getComponents()
           }
         ),
         /* @__PURE__ */ jsxs(
-          "form",
+          Form,
           {
             onDrop: handleDrop,
             onDragOver: handleDragOver,
             onDragEnter: handleDragEnter,
             onDragLeave: handleDragLeave,
-            onSubmit: handleSubmit,
+            onSubmit: async (e) => {
+              e.preventDefault();
+              await recordingAttachHandler();
+              handleSubmit(e);
+            },
             className: "gpt__form",
             action: "",
+            ...getVariant("layout.common.chat.form"),
             children: [
               dragging ? /* @__PURE__ */ jsx(
                 Box,
@@ -717,96 +724,143 @@ const makeTextarea = (chatController) => {
                   },
                   children: getLabel("msgAiDragAndDrop").text
                 }
-              ) : /* @__PURE__ */ jsx(
-                Textarea,
-                {
-                  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__ */ jsxs(Box, { className: "gpt__buttonsContainer", children: [
-                /* @__PURE__ */ jsx(Box, { sx: { display: "none" }, children: /* @__PURE__ */ jsx(
-                  "input",
+              ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { className: "search_controls", children: [
+                /* @__PURE__ */ jsx(
+                  AutogrowTextarea,
                   {
-                    type: "file",
-                    className: "gptUploadFile",
-                    multiple: true,
-                    id: `gptUploadFile__${chatController.id}`,
+                    onKeyDown,
+                    id: `GPTMessage${chatController.id}`,
+                    readOnly: actualIsLoading,
+                    value: chatController.state.current.message,
                     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 = "";
+                      chatController.state.current.message = ev.target.value;
+                      if (!chatController.state.current.message && chatController.attachments.size() < 1)
+                        chatController.currentHistoryIndex = -1;
+                    },
+                    sx: {
+                      resize: "none",
+                      px: spacing(4),
+                      background: "transparent",
+                      border: "none"
                     }
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ jsx(
                   IconButton,
                   {
+                    ...getVariant(
+                      "layout.ai.execution.formsAssistant.settingsButton"
+                    ),
                     variant: "icon-outline",
-                    onClick: () => !chatController.audioRecorder.state.recording ? chatController.audioRecorder.start() : chatController.audioRecorder.stop(),
+                    iconSize: "Sm",
+                    className: "SearchButton",
+                    icon: "Ellipsis",
+                    isLoading: actualIsLoading,
+                    onClick: () => {
+                      const util = ApiaUtil.instance;
+                      const items = [];
+                      items.push(...additionalButtons);
+                      if (items.length > 0)
+                        util.menu.open({
+                          menuProps: {
+                            anchorPoint: { x: util.mouse.x, y: util.mouse.y }
+                          },
+                          items
+                        });
+                    },
+                    sx: { display: actualIsLoading ? "none" : "flex" }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    isLoading: actualIsLoading,
+                    onClick: async (ev) => {
+                      if (!chatController.audioRecorder.state.recording) {
+                        chatController.audioRecorder.start();
+                      } else {
+                        chatController.audioRecorder.stop();
+                        await chatController.audioRecorder.attach();
+                        handleSubmit(
+                          ev
+                        );
+                      }
+                    },
                     disabled: actualIsLoading && !chatController.audioRecorder.state.recording,
                     sx: {
-                      color: chatController.audioRecorder.state.recording ? "red" : void 0
+                      color: chatController.audioRecorder.state.recording ? "red" : void 0,
+                      display: actualIsLoading ? "none" : "flex"
                     },
                     icon: chatController.audioRecorder.state.recording ? "Stop" : "Microphone",
                     id: "transcribeAudio",
-                    size: "Lg",
+                    variant: "icon-outline",
+                    iconSize: "Sm",
+                    className: "SearchButton",
                     title: getLabel("lblAiRecordAudio").text
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   IconButton,
                   {
-                    title: getLabel("btnUploadFile").text,
-                    icon: "File",
                     variant: "icon-outline",
-                    disabled: actualIsLoading,
+                    isLoading: actualIsLoading,
                     onClick: () => {
                       document.getElementById(
                         `gptUploadFile__${chatController.id}`
                       ).click();
                     },
-                    size: "Lg"
+                    icon: "Attach",
+                    id: "fileUpload",
+                    iconSize: "Sm",
+                    className: "SearchButton",
+                    sx: { display: actualIsLoading ? "none" : "flex" },
+                    title: getLabel("btnUploadFile").text
                   }
                 ),
-                isPhone ? iconButton : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  ...additionalButtons.map(
-                    (x) => x.children
-                  )
-                ] }),
                 /* @__PURE__ */ jsx(
-                  SimpleButton,
+                  IconButton,
                   {
                     title: getLabel("btnAiSend").title,
                     isLoading: actualIsLoading,
                     type: "submit",
-                    size: "sm",
-                    children: getLabel("btnAiSend").text
+                    size: "Lg",
+                    icon: "ArrowRight",
+                    variant: "icon-outline",
+                    iconSize: "Sm",
+                    className: "SearchButton"
                   }
                 )
-              ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(Box, { className: "gpt__buttonsContainer", children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "file",
+                  className: "gptUploadFile",
+                  multiple: true,
+                  capture: isMobile() ? "environment" : void 0,
+                  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 = "";
+                  }
+                }
+              ) }) })
             ]
           }
         )
@@ -851,22 +905,24 @@ class ChatController {
     });
     __publicField$3(this, "components", {
       MessageHistory: observer(() => {
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            ...getVariant("layout.common.components.chat"),
-            className: "history",
-            children: /* @__PURE__ */ jsx(AutoscrollContainer, { children: this.state.messages.map((current) => /* @__PURE__ */ jsx(current.Component, {}, current.id)) })
-          }
-        );
+        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);
     __privateAdd(this, _internalAudioRecorder, new AudioRecorder());
+    __publicField$3(this, "audioBlob", new Promise(() => {
+    }));
     __publicField$3(this, "audioRecorder", {
-      start: () => __privateGet(this, _internalAudioRecorder).start().then(async (blob) => {
+      start: () => {
+        this.audioBlob = __privateGet(this, _internalAudioRecorder).start();
+      },
+      stop: async () => {
+        __privateGet(this, _internalAudioRecorder).stop();
+      },
+      attach: async () => {
+        const blob = await this.audioBlob;
         const m = new AIMessageAttachments(
           AIMessageRole.USER,
           new AIFileContent(
@@ -876,9 +932,6 @@ class ChatController {
           () => this.attachments.drop(m)
         );
         this.attachments.add(m);
-      }),
-      stop: async () => {
-        __privateGet(this, _internalAudioRecorder).stop();
       },
       record: 0,
       state: __privateGet(this, _internalAudioRecorder).state
@@ -944,7 +997,7 @@ 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.id)),
+      getComponents: () => this.state.current.attachments.map((x) => /* @__PURE__ */ jsx(x.Component, { closeButton: true, canAddDescription: true }, x.getId())),
       get: () => this.state.current.attachments,
       size: () => this.state.current.attachments.length
     });