@websolutespa/bom-llm 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @websolutespa/bom-llm
 
+## 0.1.7
+
+### Patch Changes
+
+- ba32bef: Added: maxFileSize & mimeTypes
+- f826c08: Added: storageMode option
+
 ## 0.1.6
 
 ### Patch Changes

package/README.md

@@ -148,17 +148,6 @@ You can handle the click event of the generated cta action with the onAction han
   bomLlm(options);
 ```
 
-### Supported types
-
-Currently available types are:  
-
-- event
-- eventItem
-- poi
-- poiItem
-- tripadvisor
-- tripadvisorItem
-
 ---
 
 ##### *this library is for internal usage and not production ready*

package/dist/esm/index.js

@@ -19580,6 +19580,35 @@ const IconLlmPlay = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 IconLlmPlay.displayName = 'IconLlmPlay';
 
+const IconLlmRefresh = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "icon-llm-refresh",
+    "data-icon": "icon-llm-refresh",
+    "aria-hidden": "true",
+    ...props,
+    ref: ref,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M3 3v5h5"
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M16 16h5v5"
+    })]
+  });
+});
+IconLlmRefresh.displayName = 'IconLlmRefresh';
+
 const IconLlmSend = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntimeExports.jsx("svg", {
     enableBackground: "new 0 0 24 24",
@@ -31975,6 +32004,10 @@ export type LlmChunkUnknownItem = Omit<Record<string, unknown>, 'type' | 'id'> &
 // type StuctureMappedType<T extends LlmChunkType> = { [K in T]: Array<LlmChunkItem<K>> };
 // export type LlmChunkItems<T extends LlmChunkType = LlmChunkType> = Record<T, (item: Extract<LlmChunkItem, { type: T }>) => string>;
 
+const LLM_DEFAULT_MIME_TYPES = '.jpg, .jpeg, .png, .svg, .webp, .txt, .md, .pdf, .csv, .doc, .xls, .ppt';
+const LLM_DEFAULT_MAX_FILE_SIZE = 1048576; // 1Mb
+// export const LLM_DEFAULT_MAX_FILE_SIZE = 2097152; // 2Mb
+
 const Chunk = _ref => {
   let {
     item,
@@ -41316,6 +41349,7 @@ styleInject(css_248z);
 const PageUpload = () => {
   const label = useLabel();
   const upload = useLlm(state => state.upload);
+  const mimeTypes = useLlm(state => state.mimeTypes);
   const {
     removeFile,
     addFile,
@@ -41333,7 +41367,7 @@ const PageUpload = () => {
         className: getClassNames(style.input),
         type: "file",
         id: "file-input",
-        accept: ".jpg, .jpeg, .png, .webp, .gif, .bmp, .tif, .tiff, .txt, .rtf, .csv, .doc, .docx, .pdf",
+        accept: mimeTypes,
         onChange: addFile
       })]
     }), upload && /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
@@ -41417,7 +41451,10 @@ const Prompt = () => {
   const messages = useLlm(state => state.messages);
   const streaming = useLlm(state => state.streaming);
   const speakEnabled = useLlm(state => state.speakEnabled);
+  const mimeTypes = useLlm(state => state.mimeTypes);
+  const storageMode = useLlm(state => state.storageMode);
   const {
+    clear,
     setPrompt,
     recognizeStart,
     recognizeStop,
@@ -41475,56 +41512,71 @@ const Prompt = () => {
               className: "llm__prompt-speak",
               type: "button",
               "aria-label": speakEnabled ? label('llm.disableSpeak') : label('llm.enableSpeak'),
+              title: speakEnabled ? label('llm.disableSpeak') : label('llm.enableSpeak'),
               "aria-pressed": speakEnabled,
               onClick: toggleSpeak,
               children: speakEnabled ? /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmVolume, {}) : /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmVolumeX, {})
-            }), /*#__PURE__*/jsxRuntimeExports.jsx("label", {
-              htmlFor: "llm-prompt-textarea",
-              className: "llm__prompt-label",
-              children: label('llm.prompt')
-            }), /*#__PURE__*/jsxRuntimeExports.jsx("textarea", {
-              id: "llm-prompt-textarea",
-              className: "llm__prompt-textarea",
-              name: "prompt",
-              placeholder: app?.contents.promptPlaceholder,
-              onKeyDown: onKeyDown,
-              onChange: onChange,
-              ref: textAreaRef,
-              rows: 1,
-              value: prompt,
-              "aria-disabled": streaming
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(BusyIndicator, {}), hasUpload && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-              className: "llm__prompt-upload-group",
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-                className: "llm__prompt-upload",
-                "aria-label": label('llm.upload'),
-                children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmPaperclip, {})
-              }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
-                className: "llm__prompt-upload-input",
-                type: "file",
-                id: "file-input",
-                accept: ".jpg, .jpeg, .png, .webp, .gif, .bmp, .tif, .tiff, .txt, .rtf, .csv, .doc, .docx, .pdf",
-                onChange: addFile
+            }), storageMode === 'session' && threadId && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+              className: "llm__prompt-speak",
+              type: "button",
+              "aria-label": label('llm.newThread'),
+              title: label('llm.newThread'),
+              onClick: clear,
+              children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmRefresh, {})
+            }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+              className: "llm__prompt-textareaGroup",
+              children: [/*#__PURE__*/jsxRuntimeExports.jsx("label", {
+                htmlFor: "llm-prompt-textarea",
+                className: "llm__prompt-label",
+                children: label('llm.prompt')
+              }), /*#__PURE__*/jsxRuntimeExports.jsx("textarea", {
+                id: "llm-prompt-textarea",
+                className: "llm__prompt-textarea",
+                name: "prompt",
+                placeholder: app?.contents.promptPlaceholder,
+                onKeyDown: onKeyDown,
+                onChange: onChange,
+                ref: textAreaRef,
+                rows: 1,
+                value: prompt,
+                "aria-disabled": streaming
+              }), /*#__PURE__*/jsxRuntimeExports.jsx(BusyIndicator, {})]
+            }), hasUpload && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+              children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                className: "llm__prompt-upload-group",
+                children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                  className: "llm__prompt-upload",
+                  "aria-label": label('llm.upload'),
+                  title: label('llm.upload'),
+                  children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmPaperclip, {})
+                }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
+                  className: "llm__prompt-upload-input",
+                  type: "file",
+                  id: "file-input",
+                  accept: mimeTypes,
+                  onChange: addFile
+                })]
+              }), upload && /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
+                className: "llm__prompt-upload-file",
+                onClick: () => removeFile(),
+                title: upload.file.name,
+                children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                  children: upload.file.name
+                }), /*#__PURE__*/jsxRuntimeExports.jsx(IconX, {}), /*#__PURE__*/jsxRuntimeExports.jsx("img", {
+                  src: upload.base64,
+                  alt: ""
+                })]
               })]
             }), hasSpeechRecognition && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
               className: "llm__prompt-microphone",
               type: "button",
               "aria-label": label('llm.dictate'),
+              title: label('llm.dictate'),
               onMouseDown: () => recognizeStart(),
               onMouseUp: () => recognizeStop(),
               onTouchStart: () => recognizeStart(),
               onTouchEnd: () => recognizeStop(),
               children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmMicrophone, {})
-            }), hasUpload && upload && /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
-              className: "llm__prompt-upload-file",
-              onClick: () => removeFile(),
-              title: upload.file.name,
-              children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
-                children: upload.file.name
-              }), /*#__PURE__*/jsxRuntimeExports.jsx(IconX, {}), /*#__PURE__*/jsxRuntimeExports.jsx("img", {
-                src: upload.base64,
-                alt: ""
-              })]
             })]
           }), streaming ? /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
             className: "llm__prompt-stop",
@@ -44044,6 +44096,7 @@ class ApiService {
     if (mode === void 0) {
       mode = 'default';
     }
+    // console.log('ApiService.decoratedHistory.storedHistory', storedHistory);
     if (storedHistory.length > 0) {
       const threadIds = storedHistory.reduce((p, c) => {
         if (!p.includes(c.threadId)) {
@@ -44051,16 +44104,18 @@ class ApiService {
         }
         return p;
       }, []);
-      // console.log('threadIds', threadIds);
+      // console.log('ApiService.decoratedHistory.threadIds', threadIds);
       const decodedThreads = {};
       for (const threadId of threadIds) {
         const app = await this.getInfo({
           threadId
         });
+        // console.log('ApiService.decoratedHistory.thread', app?.thread);
         if (app?.thread) {
           const decodedThread = MessageDecoder.decodeThread(app.thread);
+          // console.log('ApiService.decoratedHistory.decodedThread', decodedThread);
           if (decodedThread) {
-            decodedThreads[app.thread.threadId] = decodedThread;
+            decodedThreads[threadId] = decodedThread;
           }
         }
       }
@@ -44072,16 +44127,27 @@ class ApiService {
         } = _ref;
         const decodedThread = decodedThreads[threadId];
         if (decodedThread) {
+          decodedThread.messages.forEach(x => {
+            if (x.role === 'assistant') {
+              x.threadId = threadId;
+              // this should fix old history missing messageId;
+              if (!x.messageId && mode !== 'page') {
+                x.messageId = messageId;
+              }
+            }
+          });
           const index = this.options.test ? i + 1 : decodedThread.messages.findIndex(x => x.messageId === messageId);
+          // console.log('ApiService.decoratedHistory.index', index);
           if (index !== -1) {
             const messages = decodedThread.messages.slice(0, index + 1);
+            // console.log('ApiService.decoratedHistory.messages', messages);
             if (this.options.test) {
               messages[index].threadId = threadId;
               messages[index].messageId = messageId;
               messages[index].createdAt = new Date().toISOString();
             }
             const histories = messagesToHistory(messages);
-            // console.log(histories);
+            // console.log('ApiService.decoratedHistory.histories', histories);
             /*
             const history: LlmHistory = {
               threadId,
@@ -44092,10 +44158,11 @@ class ApiService {
             */
             return histories[0];
           }
+          return undefined;
         }
         return undefined;
-      }).filter(x => Boolean(x));
-      // console.log('history', history);
+      }).filter(x => x !== undefined);
+      // console.log('ApiService.decoratedHistory.history', history);
       history.sort((a, b) => {
         if (a.createdAt && b.createdAt) {
           return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
@@ -44887,6 +44954,17 @@ function fileToResizedBase64(file, maxSize) {
     reader.readAsDataURL(file);
   });
 }
+function formatBytes(bytes, decimals) {
+  if (decimals === void 0) {
+    decimals = 2;
+  }
+  if (!+bytes) return '0 Bytes';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
 
 const createLlmStore = config => {
   const sanitizedConfig = (config.plugins || []).reduce((p, c) => {
@@ -44913,7 +44991,6 @@ const createLlmStore = config => {
     customTheme,
     endpoint,
     preview,
-    storage,
     test,
     threadId,
     decorateUrl,
@@ -44924,30 +45001,33 @@ const createLlmStore = config => {
   const theme = getThemes([customTheme], config.defaultTheme);
   const vars = getVars(theme);
   const props = {
-    hydrated: false,
-    theme,
-    vars,
-    messages: [],
-    history: [],
-    storedHistory: [],
-    contexts,
-    prompt: '',
-    locale: 'en',
-    streaming: false,
-    speakEnabled: true,
     asideEnabled: false,
-    ready: false,
-    components: {
-      ...LLM_COMPONENTS,
-      ...options.components
-    },
     blocks: {
       ...LLM_BLOCKS,
       ...options.blocks
     },
+    components: {
+      ...LLM_COMPONENTS,
+      ...options.components
+    },
+    contexts,
+    history: [],
+    hydrated: false,
+    locale: 'en',
+    maxFileSize: LLM_DEFAULT_MAX_FILE_SIZE,
+    messages: [],
+    mimeTypes: LLM_DEFAULT_MIME_TYPES,
+    prompt: '',
+    ready: false,
+    speakEnabled: true,
+    storageMode: options.storageMode || 'local',
+    storedHistory: [],
+    streaming: false,
     systemContext: {
       ...options.systemContext
-    }
+    },
+    theme,
+    vars
   };
   let messageService = undefined;
   const speech = new Speech();
@@ -45004,10 +45084,11 @@ const createLlmStore = config => {
         return apiService;
       },
       init: async (locale, instance) => {
+        const state = get();
         const apiService = new ApiService({
           apiKey,
           appKey,
-          threadId,
+          threadId: threadId || state.threadId,
           endpoint,
           locale,
           test,
@@ -45017,7 +45098,6 @@ const createLlmStore = config => {
         if (!app) {
           return;
         }
-        const state = get();
         const textToSpeechApiKey = app.contents.textToSpeechApiKey;
         const textToSpeechVoiceId = app.contents.textToSpeechVoiceId;
         const synthesisMode = app.contents.disableSpeechSynthesis ? 'none' : app.contents.synthesisMode || 'default';
@@ -45045,6 +45125,7 @@ const createLlmStore = config => {
         */
         const theme = getThemes([app.contents.customTheme, testTheme, customTheme], config.defaultTheme);
         const mode = theme.mode;
+        const storageMode = options.storageMode || app.contents.storageMode || 'local';
         const storedHistory = await getHistory(state.storedHistory);
         const history = await apiService.decorateHistory(storedHistory, mode);
         /*
@@ -45062,11 +45143,14 @@ const createLlmStore = config => {
           locale,
           ready: true,
           recognitionMode,
+          storageMode,
           storedHistory,
           synthesisMode,
           theme,
           threadId,
           vars,
+          mimeTypes: app.contents.mimeTypes || LLM_DEFAULT_MIME_TYPES,
+          maxFileSize: app.contents.maxFileSize || LLM_DEFAULT_MAX_FILE_SIZE,
           ...thread
         };
         const newState = {
@@ -45298,6 +45382,9 @@ const createLlmStore = config => {
         return state.app?.contents.enableUpload === true;
       },
       addFile: async event => {
+        const {
+          maxFileSize
+        } = get();
         const files = event.target?.files;
         // console.log('useLlm.addFile', files, Array.isArray(files));
         try {
@@ -45307,6 +45394,11 @@ const createLlmStore = config => {
               console.log('useLlm.addFile.error', 'file not found');
               return;
             }
+            // const app = get().app;
+            if (file.size > maxFileSize) {
+              toast(`Max file size exceeded ${formatBytes(maxFileSize)}`);
+              return;
+            }
             const base64 = file.type.indexOf('image') === 0 ? await fileToResizedBase64(file) : undefined;
             event.target.value = null;
             // console.log('useLlm.addFile.base64', base64);
@@ -45434,7 +45526,7 @@ const createLlmStore = config => {
     }
   }), {
     name: storeKey,
-    storage: createJSONStorage(() => storage || localStorage),
+    storage: createJSONStorage(() => props.storageMode === 'session' ? sessionStorage : localStorage),
     onRehydrateStorage: () => () => {
       useStore.setState({
         hydrated: true
@@ -45446,6 +45538,9 @@ const createLlmStore = config => {
           ...persistedState.app
         };
       }
+      if (persistedState.threadId && currentState.storageMode === 'session') {
+        currentState.threadId = persistedState.threadId;
+      }
       currentState.storedHistory = persistedState.storedHistory && [...persistedState.storedHistory];
       currentState.speakEnabled = persistedState.speakEnabled || false;
       speech.enabled = currentState.speakEnabled;
@@ -45459,9 +45554,10 @@ const createLlmStore = config => {
       return currentState;
     },
     partialize: state => {
+      const enabledKeys = state.storageMode === 'session' ? ['locale', 'speakEnabled', 'threadId'] : ['locale', 'speakEnabled'];
       const store = Object.fromEntries(Object.entries(state).filter(_ref => {
         let [key] = _ref;
-        return ['locale', 'speakEnabled'].includes(key);
+        return enabledKeys.includes(key);
       }));
       store.storedHistory = historyToStoredHistory(state.history);
       // console.log('history', store.storedHistory);
@@ -45496,6 +45592,7 @@ function messagesToHistory(messages) {
     }
     return p;
   }, []);
+  // console.log('useLlm.messagesToHistory', history);
   return history.filter(x => x.threadId && x.messageId);
 }
 function historyToStoredHistory(history) {
@@ -45967,6 +46064,12 @@ var defaultLabels = [{
     en: "I'm thinking of an answer...",
     it: "Sto pensando a una riposta..."
   }
+}, {
+  id: "llm.newThread",
+  text: {
+    en: "Start a new chat",
+    it: "Nuova chat"
+  }
 }];
 
 const App = _ref => {