From 8e61c713db961846d8b4325395a492224b837327 Mon Sep 17 00:00:00 2001 From: Andrew Risse Date: Tue, 27 Aug 2024 11:12:06 -0600 Subject: [PATCH] fix context --- packages/ui/zarf.yaml | 16 ++++++------ .../lib/components/ChatFileUploadForm.svelte | 5 ++-- .../src/lib/components/LFFileUploadBtn.svelte | 2 +- .../src/lib/components/Message.svelte | 2 +- .../lib/components/UploadedFileCards.svelte | 2 +- src/leapfrogai_ui/src/lib/constants/index.ts | 3 +++ .../src/lib/constants/toastMessages.ts | 9 +++++++ .../(dashboard)/[[thread_id]]/+page.server.ts | 2 ++ .../(dashboard)/[[thread_id]]/+page.svelte | 25 +++++++++++++++---- 9 files changed, 48 insertions(+), 18 deletions(-) diff --git a/packages/ui/zarf.yaml b/packages/ui/zarf.yaml index 93ae95896..dd2af2815 100644 --- a/packages/ui/zarf.yaml +++ b/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 diff --git a/src/leapfrogai_ui/src/lib/components/ChatFileUploadForm.svelte b/src/leapfrogai_ui/src/lib/components/ChatFileUploadForm.svelte index 385c3654a..5308be887 100644 --- a/src/leapfrogai_ui/src/lib/components/ChatFileUploadForm.svelte +++ b/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); diff --git a/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte b/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte index 7400a6882..f63669350 100644 --- a/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte +++ b/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(); diff --git a/src/leapfrogai_ui/src/lib/components/Message.svelte b/src/leapfrogai_ui/src/lib/components/Message.svelte index 3ab8d2c11..7bc068343 100644 --- a/src/leapfrogai_ui/src/lib/components/Message.svelte +++ b/src/leapfrogai_ui/src/lib/components/Message.svelte @@ -170,7 +170,7 @@ {#if fileMetadata}
{#each fileMetadata as file} 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} diff --git a/src/leapfrogai_ui/src/lib/constants/index.ts b/src/leapfrogai_ui/src/lib/constants/index.ts index 74a0c4ade..7f3352013 100644 --- a/src/leapfrogai_ui/src/lib/constants/index.ts +++ b/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: "; diff --git a/src/leapfrogai_ui/src/lib/constants/toastMessages.ts b/src/leapfrogai_ui/src/lib/constants/toastMessages.ts index 7e40b4fec..c8f059879 100644 --- a/src/leapfrogai_ui/src/lib/constants/toastMessages.ts +++ b/src/leapfrogai_ui/src/lib/constants/toastMessages.ts @@ -55,3 +55,12 @@ export const ERROR_PROCESSING_FILE_MSG_TOAST = (override: Partial = { title: 'Error Processing File', ...override }); + +export const MAX_COMBINED_FILE_TEXT_LENGTH_WARNING = ( + override: Partial = {} +): ToastData => ({ + kind: 'warning', + title: 'Too much data', + subtitle: 'File text was truncated due to excessive length', + ...override +}); diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.server.ts b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.server.ts index 9f0778ccc..d3f9aa045 100644 --- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.server.ts +++ b/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); diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte index bdfeec498..460d9b564 100644 --- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte +++ b/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 @@
-
+