fix context

packages/ui/zarf.yaml

@@ -1,13 +1,13 @@
 kind: ZarfPackageConfig
 metadata:
   name: leapfrogai-ui
-  version: '###ZARF_PKG_TMPL_IMAGE_VERSION###'
+  version: "###ZARF_PKG_TMPL_IMAGE_VERSION###"
   description: >
     A UI for LeapfrogAI
 
 constants:
   - name: IMAGE_VERSION
-    value: '###ZARF_PKG_TMPL_IMAGE_VERSION###'
+    value: "###ZARF_PKG_TMPL_IMAGE_VERSION###"
 
 variables:
   - name: LEAPFROGAI_API_BASE_URL #LEAPFROGAI_API_BASE_URL
@@ -35,27 +35,27 @@ variables:
     sensitive: false
   - name: SYSTEM_PROMPT
     description: The default system prompt to use for the LLM
-    default: 'You are a helpful AI assistant created by Defense Unicorns.'
+    default: 'You may be provided with a list of files and their content in the following structure: [{"filename": "test.pdf","text": "some fake text"}]. Using the content of these files as context, you should refer to specific files by their filename when relevant and use the text content to provide detailed, accurate, and relevant information or answers. If the user asks questions that can be answered based on the content of the provided files, use the appropriate file''s text in your response. If the user requests clarification, further details, or specific information about a file, respond using the most relevant file or files. If necessary, combine information from multiple files to form a comprehensive response.'
     prompt: true
     sensitive: false
   - name: TEMPERATURE
     description: The default temperature for the LLM
-    default: '0.1'
+    default: "0.1"
     prompt: true
     sensitive: false
   - name: SUPABASE_ANON_KEY
-    default: ''
+    default: ""
     description: Public key for Supabase
     prompt: true
     sensitive: false
   - name: DISABLE_KEYCLOAK
     description: Disable keycloak true or false
-    default: 'true'
+    default: "true"
     prompt: true
     sensitive: false
   - name: MESSAGE_LENGTH_LIMIT
     description: The maximum length of a message to allow from the user to the backend
-    default: '10000'
+    default: "10000"
     prompt: true
     sensitive: false
 
@@ -67,7 +67,7 @@ components:
         namespace: leapfrogai
         localPath: chart
         valuesFiles:
-          - 'chart/ui-values.yaml'
+          - "chart/ui-values.yaml"
         # x-release-please-start-version
         version: 0.11.0
         # x-release-please-end

src/leapfrogai_ui/src/lib/components/ChatFileUploadForm.svelte

@@ -52,10 +52,11 @@
     on:change={(e) => {
       uploadingFiles = true;
 
-      for (const file of e.detail) {
+      // Metadata is limited to 512 characters, we use a short id to save space
+      for (let i = 0; i < e.detail.length; i++) {
         attachedFileMetadata = [
           ...attachedFileMetadata,
-          { id: uuidv4(), name: file.name, type: file.type, status: 'uploading' }
+          { id: i, name: e.detail[i].name, type: e.detail[i].type, status: 'uploading' }
         ];
       }
       submit(e.detail);

src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte

@@ -11,7 +11,7 @@
   export let disabled = false;
   export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'sm';
   export let outline: boolean = false;
-  export let testId: string; // for the button element
+  export let testId: string | null = null; // for the button element
 
   const dispatch = createEventDispatcher();
 </script>

src/leapfrogai_ui/src/lib/components/Message.svelte

@@ -170,7 +170,7 @@
             {#if fileMetadata}
               <div
                 id="uploaded-files"
-                class={'flex max-w-full  gap-2 overflow-x-scroll bg-gray-900'}
+                class={'flex max-w-full  gap-2 overflow-x-auto bg-gray-900'}
               >
                 {#each fileMetadata as file}
                   <UploadedFileCard

src/leapfrogai_ui/src/lib/components/UploadedFileCards.svelte

@@ -9,7 +9,7 @@
 <div
   id="uploaded-files"
   class={attachedFileMetadata.length > 0
-    ? 'ml-9 flex max-w-full  gap-2 overflow-x-scroll bg-gray-700 px-2.5'
+    ? 'ml-9 flex max-w-full  gap-2 overflow-x-auto bg-gray-700 px-2.5'
     : 'hidden'}
 >
   {#each attachedFileMetadata as file, index}

src/leapfrogai_ui/src/lib/constants/index.ts

@@ -9,6 +9,7 @@ export const MAX_FILE_SIZE = 512000000;
 export const ASSISTANTS_NAME_MAX_LENGTH = 256;
 export const ASSISTANTS_DESCRIPTION_MAX_LENGTH = 512;
 export const ASSISTANTS_INSTRUCTIONS_MAX_LENGTH = 256000;
+export const MAX_COMBINED_FILE_TEXT_LENGTH = 8000;
 
 // TODO - once using API to save, these defaults should be returned by the POST call and would not need to be supplied
 // We only need to default the model and tools
@@ -73,3 +74,5 @@ export const AVATAR_FILE_SIZE_ERROR_TEXT = `File must be less than ${MAX_AVATAR_
 export const FILE_SIZE_ERROR_TEXT = `File must be less than ${MAX_FILE_SIZE / 1000000} MB`;
 export const INVALID_FILE_TYPE_ERROR_TEXT = `Invalid file type, accepted types are: ${ACCEPTED_FILE_TYPES.join(', ')}`;
 export const NO_SELECTED_ASSISTANT_ID = 'noSelectedAssistantId';
+
+export const FILE_UPLOAD_PROMPT = "The following are the user's files: ";

src/leapfrogai_ui/src/lib/constants/toastMessages.ts

@@ -55,3 +55,12 @@ export const ERROR_PROCESSING_FILE_MSG_TOAST = (override: Partial<ToastData> = {
   title: 'Error Processing File',
   ...override
 });
+
+export const MAX_COMBINED_FILE_TEXT_LENGTH_WARNING = (
+  override: Partial<ToastData> = {}
+): ToastData => ({
+  kind: 'warning',
+  title: 'Too much data',
+  subtitle: 'File text was truncated due to excessive length',
+  ...override
+});

src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.server.ts

@@ -64,9 +64,11 @@ export const actions: Actions = {
               }
               i++;
             }
+
             extractedFilesText.push({ id: file.id, filename: file.name, text });
           }
         }
+
         return withFiles({ extractedFilesText: extractedFilesText, form });
       } catch (e) {
         console.error(e);

src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte

@@ -9,7 +9,11 @@
   import Message from '$components/Message.svelte';
   import { getMessageText } from '$helpers/threads';
   import { getUnixSeconds } from '$helpers/dates.js';
-  import { NO_SELECTED_ASSISTANT_ID } from '$constants';
+  import {
+    FILE_UPLOAD_PROMPT,
+    MAX_COMBINED_FILE_TEXT_LENGTH,
+    NO_SELECTED_ASSISTANT_ID
+  } from '$constants';
   import { twMerge } from 'tailwind-merge';
   import {
     isRunAssistantMessage,
@@ -20,7 +24,8 @@
   import {
     ERROR_GETTING_AI_RESPONSE_TOAST,
     ERROR_GETTING_ASSISTANT_MSG_TOAST,
-    ERROR_SAVING_MSG_TOAST
+    ERROR_SAVING_MSG_TOAST,
+    MAX_COMBINED_FILE_TEXT_LENGTH_WARNING
   } from '$constants/toastMessages';
   import SelectAssistantDropdown from '$components/SelectAssistantDropdown.svelte';
   import { PaperPlaneOutline, StopOutline } from 'flowbite-svelte-icons';
@@ -228,11 +233,20 @@
     try {
       await threadsStore.setSendingBlocked(true);
       if (data.thread?.id) {
-        if (extractedFilesText) {
+        let extractedFilesTextString = JSON.stringify(extractedFilesText);
+
+        if (extractedFilesTextString.length > MAX_COMBINED_FILE_TEXT_LENGTH) {
+          extractedFilesTextString = extractedFilesTextString.substring(
+            0,
+            MAX_COMBINED_FILE_TEXT_LENGTH
+          );
+          toastStore.addToast(MAX_COMBINED_FILE_TEXT_LENGTH_WARNING());
+        }
+        if (extractedFilesText.length > 0) {
           // Save the text of the document as it's own message before sending actual question
           const contextMsg = await saveMessage({
             thread_id: data.thread.id,
-            content: `The following is a list of file names along with their respective text content. Please consider the information from these files as needed in the context of the conversation: ${JSON.stringify(extractedFilesText)}`,
+            content: `${FILE_UPLOAD_PROMPT}: ${extractedFilesTextString}`,
             role: 'user',
             metadata: {
               hideMessage: 'true'
@@ -259,6 +273,7 @@
             : null)
         });
 
+        console.log('$chatMessages', $chatMessages);
         // store user input
         await threadsStore.addMessageToStore(newMessage);
         submitChatMessage(e); // submit to AI (/api/chat)
@@ -363,7 +378,7 @@
   <div id="chat-tools" class="flex flex-col gap-2 px-8">
     <SelectAssistantDropdown assistants={data?.assistants || []} />
 
-    <div class="flex flex-grow flex-col rounded-lg bg-gray-50 p-px dark:bg-gray-700">
+    <div class="flex flex-grow flex-col rounded-lg bg-gray-50 px-2 dark:bg-gray-700">
       <UploadedFileCards bind:attachedFileMetadata {handleRemoveFile} />
 
       <div id="chat-row" class="flex w-full items-center">