@apia/ai 3.0.1 → 3.0.6

package/dist/index.d.ts

@@ -1,4 +1,62 @@
-export { ChatController, TMessageType } from './components/chat/ChatController.js';
-export { ChatMessage } from './components/chat/messages/ChatMessage.js';
-export { MultipleChoiceMessage, TMultipleChoiceMessageOption } from './components/chat/messages/MultipleChoiceMessage.js';
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { EventEmitter } from '@apia/util';
+
+declare class ChatMessage {
+    #private;
+    messageType: TMessageType;
+    id: number;
+    parseMessage(message: string): string;
+    constructor(message: ReactNode, messageType: TMessageType);
+    get message(): ReactNode;
+}
+
+type TMessageType = 'user' | 'system' | 'warning' | 'error' | 'information' | 'response' | 'multipleChoice';
+declare class ChatController extends EventEmitter<{
+    listChange: ChatMessage[];
+    messageSubmited?: string;
+}> {
+    #private;
+    id: string;
+    constructor(id: string, welcomeMessage?: string);
+    components: {
+        MessageHistory: () => react.JSX.Element;
+        Textarea: {
+            ({ hideDeleteButton, isLoading: outIsLoading, onSubmit, preventAppendUserMessages, }: {
+                hideDeleteButton?: boolean | undefined;
+                isLoading?: boolean | undefined;
+                onSubmit: (text: string) => Promise<void>;
+                preventAppendUserMessages?: boolean | undefined;
+            }): react.JSX.Element;
+            displayName: string;
+        };
+    };
+    history: {
+        add: (prompt: string) => void;
+        next: () => string;
+        previous: () => string | undefined;
+        useList: () => ChatMessage[];
+    };
+    messages: {
+        add: (message: ChatMessage) => void;
+        clear: () => void;
+    };
+}
+
+type TMultipleChoiceMessageOption<OptionProps> = {
+    label: string;
+    url: string;
+    additionalProps?: OptionProps;
+};
+declare class MultipleChoiceMessage<OptionProps> extends ChatMessage {
+    private question;
+    private options;
+    private Renderer?;
+    constructor(question: string, options: TMultipleChoiceMessageOption<OptionProps>[], Renderer?: ((props: {
+        item: TMultipleChoiceMessageOption<OptionProps>;
+    }) => ReactElement) | undefined);
+    get message(): react.JSX.Element;
+}
+
+export { ChatController, ChatMessage, MultipleChoiceMessage, type TMessageType, type TMultipleChoiceMessageOption };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,606 @@
-export { ChatController } from './components/chat/ChatController.js';
-export { ChatMessage } from './components/chat/messages/ChatMessage.js';
-export { MultipleChoiceMessage } from './components/chat/messages/MultipleChoiceMessage.js';
+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 { IconButton, SimpleButton, ApiaUtil } from '@apia/components';
+
+const AutoscrollContainer = ({ children }) => {
+  const observer = useRef(null);
+  const unsuscribe = useRef(null);
+  const isFullScrolled = useRef(false);
+  const hasInited = useRef(false);
+  const ref = useCallback((el) => {
+    if (!el)
+      return;
+    if (!hasInited.current) {
+      hasInited.current = true;
+      el.scrollTo({
+        top: el.getBoundingClientRect().height,
+        behavior: "auto"
+      });
+      isFullScrolled.current = true;
+    }
+    observer.current?.disconnect();
+    unsuscribe.current?.();
+    observer.current = new MutationObserver(([mutation]) => {
+      if (mutation && mutation.target instanceof HTMLElement && mutation.target === el) {
+        if (isFullScrolled.current && mutation.target.scrollTop !== mutation.target.scrollHeight - mutation.target.offsetHeight) {
+          mutation.target.scrollTo({
+            top: mutation.target.scrollHeight,
+            behavior: "smooth"
+          });
+        }
+      }
+    });
+    observer.current.observe(el, { childList: true, subtree: true });
+    const handleScroll = (ev) => {
+      if (ev.target === el && el instanceof HTMLElement) {
+        setTimeout(() => {
+          isFullScrolled.current = Math.abs(el.scrollTop - (el.scrollHeight - el.offsetHeight)) < 150;
+        }, 100);
+      }
+    };
+    el.addEventListener("scroll", handleScroll);
+    unsuscribe.current = () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...getVariant("layout.common.components.autoscrollContainer"),
+      className: "autoscrollContainer",
+      ref,
+      children
+    }
+  );
+};
+
+function isImageFile(file) {
+  const IMAGE_EXTENSIONS = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "bmp",
+    "webp",
+    "tiff",
+    "svg",
+    "jfif"
+  ];
+  return IMAGE_EXTENSIONS.includes(file.name.split(".").pop());
+}
+function getImageOcrMaker(lang) {
+  return new class ImageOcrMaker {
+    async processFile(file, onProgress) {
+      const tesseract = await import('tesseract.js');
+      const worker = await tesseract.createWorker(lang, 1, {
+        logger(arg) {
+          onProgress?.(arg.progress * 100);
+        }
+      });
+      const result = (await worker.recognize(file)).data.text;
+      return [result];
+    }
+    willProcessFile(file) {
+      return isImageFile(file);
+    }
+  }();
+}
+
+function isPdfFile(file) {
+  const IMAGE_EXTENSIONS = ["pdf"];
+  return IMAGE_EXTENSIONS.includes(file.name.split(".").pop());
+}
+function getPdfReader() {
+  return new class PdfReader {
+    async processFile(file, onProgress) {
+      onProgress?.(0);
+      const { getDocument, GlobalWorkerOptions } = await import('pdfjs-dist');
+      async function getPdfTextFromArrayBuffer(buffer) {
+        GlobalWorkerOptions.workerSrc = "../includes/pdf.worker.min.js";
+        const pdf = await getDocument({ data: buffer }).promise;
+        const pages = [];
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const textContent = await page.getTextContent();
+          pages.push(
+            textContent.items.map((item) => item.str).join(" ")
+          );
+        }
+        return pages;
+      }
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = async function(event) {
+          if (!event.target?.result) {
+            alert("Error al leer el archivo.");
+            return;
+          }
+          const buffer = event.target.result;
+          const text = await getPdfTextFromArrayBuffer(buffer);
+          onProgress?.(100);
+          resolve(text);
+        };
+        reader.readAsArrayBuffer(file);
+      });
+    }
+    willProcessFile(file) {
+      return isPdfFile(file);
+    }
+  }();
+}
+
+class WrongFormatError extends Error {
+  constructor(fileName) {
+    super(`File format not supported: ${fileName}`);
+  }
+}
+function useHandleFileUpload({
+  onContent
+}) {
+  const [progress, setProgress] = useState(100);
+  const handleFileUpload = useCallback(
+    async (ev) => {
+      setProgress(0);
+      const imageProcessor = getImageOcrMaker();
+      const pdfProcessor = getPdfReader();
+      await (async () => {
+        const obtainedText = [];
+        const files = ev.target.files;
+        const filesLength = ev.target.files?.length ?? 0;
+        if (files) {
+          for (let i = 0; i < filesLength; i++) {
+            const file = files[i];
+            if (!isImageFile(file) && !isPdfFile(file)) {
+              setProgress(100);
+              throw new WrongFormatError(file.name);
+            }
+            const handleProgress = (progress2) => {
+              setProgress(
+                i / filesLength * 100 + 1 / filesLength * 100 * (progress2 / 100)
+              );
+            };
+            let result = "";
+            if (imageProcessor.willProcessFile(file)) {
+              try {
+                result = (await imageProcessor.processFile(file, handleProgress))[0];
+              } catch (e) {
+                console.error(e);
+              }
+            } else if (pdfProcessor.willProcessFile(file)) {
+              result = (await pdfProcessor.processFile(file, handleProgress)).join("\n\n");
+            }
+            if (result) {
+              obtainedText.push(result);
+            }
+            setProgress((i + 1) / filesLength * 100);
+          }
+        }
+        onContent(obtainedText);
+      })();
+      ev.target.value = "";
+    },
+    [onContent]
+  );
+  return { progress, handleFileUpload };
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(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);
+  return value;
+};
+var _message;
+let maxId = 0;
+class ChatMessage {
+  constructor(message, messageType) {
+    this.messageType = messageType;
+    __publicField$1(this, "id");
+    __privateAdd$1(this, _message, void 0);
+    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));
+  }
+  parseMessage(message) {
+    let result = message;
+    result = result.replaceAll("[strong]", "<strong>");
+    result = result.replaceAll("[/strong]", "</strong>");
+    return result;
+  }
+  get message() {
+    return __privateGet$1(this, _message);
+  }
+}
+_message = new WeakMap();
+
+const makeTextarea = (gptController) => {
+  const NewTextarea = ({
+    hideDeleteButton,
+    isLoading: outIsLoading,
+    onSubmit,
+    preventAppendUserMessages
+  }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const submit = useCallback(
+      (text) => {
+        if (preventAppendUserMessages !== true)
+          gptController.messages.add(new ChatMessage(text, "user"));
+        gptController.history.add(text);
+        onSubmit(text).finally(() => {
+          setIsLoading(false);
+        });
+      },
+      [onSubmit, preventAppendUserMessages]
+    );
+    const handleSubmit = useCallback(
+      (ev) => {
+        ev.preventDefault();
+        const textarea = document.getElementById(
+          `GPTMessage${gptController.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) {
+        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").tooltip,
+                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").tooltip,
+                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,
+                {
+                  title: getLabel("btnAiDelete").tooltip,
+                  variant: "outline",
+                  type: "button",
+                  onClick: () => document.getElementById(
+                    `GPTMessage${gptController.id}`
+                  ).value = "",
+                  size: "sm",
+                  children: getLabel("btnAiDelete").text
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SimpleButton,
+                {
+                  title: getLabel("btnAiDeleteMessages").tooltip,
+                  variant: "outline",
+                  type: "button",
+                  onClick: () => gptController.messages.clear(),
+                  size: "sm",
+                  children: getLabel("btnAiDeleteMessages").text
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              SimpleButton,
+              {
+                title: getLabel("btnAiSend").tooltip,
+                isLoading: actualIsLoading,
+                type: "submit",
+                size: "sm",
+                children: getLabel("btnAiSend").text
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  };
+  NewTextarea.displayName = "";
+  return NewTextarea;
+};
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (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 = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  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 {
+  constructor(id, welcomeMessage) {
+    super();
+    this.id = id;
+    __privateAdd(this, _messages, []);
+    __publicField(this, "components", {
+      MessageHistory: () => {
+        const messages = this.history.useList();
+        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
+            )) })
+          }
+        );
+      },
+      Textarea: makeTextarea(this)
+    });
+    __privateAdd(this, _promptsHistory, []);
+    __privateAdd(this, _currentHistoryIndex, -1);
+    __publicField(this, "history", {
+      add: (prompt) => {
+        __privateSet(this, _currentHistoryIndex, -1);
+        if (prompt === __privateGet(this, _promptsHistory)[__privateGet(this, _promptsHistory).length]) {
+          return;
+        }
+        __privateSet(this, _promptsHistory, [
+          prompt,
+          ...__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)._];
+        else {
+          __privateSet(this, _currentHistoryIndex, -1);
+          return "";
+        }
+      },
+      previous: () => {
+        if (__privateGet(this, _promptsHistory)[__privateGet(this, _currentHistoryIndex) + 1]) {
+          return __privateGet(this, _promptsHistory)[++__privateWrapper(this, _currentHistoryIndex)._];
+        }
+      },
+      useList: () => {
+        const [messages, setMessages] = useState(__privateGet(this, _messages));
+        useEffect(() => {
+          return this.on("listChange", (messages2) => setMessages(messages2));
+        }, []);
+        return messages;
+      }
+    });
+    __publicField(this, "messages", {
+      add: (message) => {
+        __privateGet(this, _messages).push(message);
+        this.emit("listChange", [...__privateGet(this, _messages)]);
+      },
+      clear: () => {
+        __privateSet(this, _messages, []);
+        this.emit("listChange", []);
+      }
+    });
+    if (welcomeMessage)
+      __privateGet(this, _messages).push(new ChatMessage(welcomeMessage, "system"));
+  }
+}
+_messages = new WeakMap();
+_promptsHistory = new WeakMap();
+_currentHistoryIndex = 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)) })
+    ] });
+  }
+}
+
+export { ChatController, ChatMessage, MultipleChoiceMessage };
 //# sourceMappingURL=index.js.map