Flav/input bar uses file api (#5997)

* Use file upload API in the input bar * Stop uploading raw content fragment * ✨ * 👕 * 📝 * ✨ * ✂️ * ✂️ * ✂️ * ✂️ * :sparkles * ✨
dust-tt · Jul 4, 2024 · 618f150 · 618f150
1 parent 3a241be
commit 618f150
Show file tree

Hide file tree

Showing 16 changed files with 278 additions and 242 deletions.
diff --git a/front/components/assistant/conversation/ContentFragment.tsx b/front/components/assistant/conversation/ContentFragment.tsx
@@ -3,7 +3,8 @@ import type { CitationType } from "@dust-tt/sparkle/dist/cjs/components/Citation
 import type { ContentFragmentType } from "@dust-tt/types";
 import {
   isSupportedImageContentFragmentType,
-  isSupportedTextContentFragmentType,
+  isSupportedImageContentType,
+  isSupportedPlainTextContentType,
 } from "@dust-tt/types";
 
 export function ContentFragment({ message }: { message: ContentFragmentType }) {
@@ -14,9 +15,9 @@ export function ContentFragment({ message }: { message: ContentFragmentType }) {
     message.contentType === "dust-application/slack"
   ) {
     citationType = "slack";
-  } else if (isSupportedTextContentFragmentType(message.contentType)) {
+  } else if (isSupportedPlainTextContentType(message.contentType)) {
     citationType = "document";
-  } else if (isSupportedImageContentFragmentType(message.contentType)) {
+  } else if (isSupportedImageContentType(message.contentType)) {
     citationType = "image";
   }
 
@@ -38,7 +39,7 @@ function getViewUrlForContentFragment(message: ContentFragmentType) {
   }
 
   if (isSupportedImageContentFragmentType(message.contentType)) {
-    return `${message.sourceUrl}&action=view`;
+    return `${message.sourceUrl}?action=view`;
   }
 
   return undefined;

diff --git a/front/components/assistant/conversation/ConversationContainer.tsx b/front/components/assistant/conversation/ConversationContainer.tsx
@@ -28,7 +28,6 @@ import ConversationViewer from "@app/components/assistant/conversation/Conversat
 import { HelpAndQuickGuideWrapper } from "@app/components/assistant/conversation/HelpAndQuickGuideWrapper";
 import { FixedAssistantInputBar } from "@app/components/assistant/conversation/input_bar/InputBar";
 import { InputBarContext } from "@app/components/assistant/conversation/input_bar/InputBarContext";
-import type { ContentFragmentInput } from "@app/components/assistant/conversation/lib";
 import {
   createConversationWithMessage,
   createPlaceholderUserMessage,
@@ -98,7 +97,7 @@ export function ConversationContainer({
   const handleSubmit = async (
     input: string,
     mentions: MentionType[],
-    contentFragments: ContentFragmentInput[]
+    contentFragments: UploadedContentFragment[]
   ) => {
     if (!activeConversationId) {
       return null;

diff --git a/front/components/assistant/conversation/input_bar/InputBar.tsx b/front/components/assistant/conversation/input_bar/InputBar.tsx
@@ -150,20 +150,18 @@ export function AssistantInputBar({
     onSubmit(
       text,
       mentions,
-      fileUploaderService.fileBlobs.map((cf) => {
+      fileUploaderService.getFileBlobs().map((cf) => {
         return {
           title: cf.filename,
-          content: cf.content,
-          file: cf.file,
-          contentType: cf.contentType,
+          fileId: cf.fileId,
         };
       })
     );
     resetEditorText();
     fileUploaderService.resetUpload();
   };
 
-  const fileUploaderService = useFileUploaderService();
+  const fileUploaderService = useFileUploaderService({ owner });
 
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
 

diff --git a/front/components/assistant/conversation/input_bar/InputBarCitations.tsx b/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
@@ -22,10 +22,10 @@ export function InputBarCitations({
           size="xs"
           type={isImage ? "image" : "document"}
           imgSrc={blob.preview}
-          description={isImage ? undefined : blob.content}
           onClose={() => {
             fileUploaderService.removeFile(blob.id);
           }}
+          isLoading={blob.isUploading}
         />
       );
     }

diff --git a/front/components/assistant/conversation/lib.ts b/front/components/assistant/conversation/lib.ts
@@ -1,5 +1,4 @@
 import type {
-  ContentFragmentType,
   ConversationType,
   ConversationVisibility,
   InternalPostConversationsRequestBodySchema,
@@ -14,7 +13,6 @@ import { Err, Ok } from "@dust-tt/types";
 import type * as t from "io-ts";
 
 import type { NotificationType } from "@app/components/sparkle/Notification";
-import { getMimeTypeFromFile } from "@app/lib/file";
 import type { PostConversationsResponseBody } from "@app/pages/api/w/[wId]/assistant/conversations";
 
 /**
@@ -90,7 +88,7 @@ export async function submitMessage({
   messageData: {
     input: string;
     mentions: MentionType[];
-    contentFragments: ContentFragmentInput[];
+    contentFragments: UploadedContentFragment[];
   };
 }): Promise<
   Result<{ message: UserMessageWithRankType }, ConversationErrorType>
@@ -109,9 +107,7 @@ export async function submitMessage({
             },
             body: JSON.stringify({
               title: contentFragment.title,
-              content: contentFragment.content,
-              url: null,
-              contentType: getMimeTypeFromFile(contentFragment.file),
+              fileId: contentFragment.fileId,
               context: {
                 timezone:
                   Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
@@ -123,7 +119,7 @@ export async function submitMessage({
       })
     );
 
-    for (const [i, mcfRes] of contentFragmentsRes.entries()) {
+    for (const mcfRes of contentFragmentsRes) {
       if (!mcfRes.ok) {
         const data = await mcfRes.json();
         console.error("Error creating content fragment", data);
@@ -133,14 +129,6 @@ export async function submitMessage({
           message: data.error.message || "Please try again or contact us.",
         });
       }
-      const cfData = (await mcfRes.json())
-        .contentFragment as ContentFragmentType;
-      uploadRawContentFragment({
-        workspaceId: owner.sId,
-        conversationId,
-        contentFragmentId: cfData.sId,
-        file: contentFragments[i].file,
-      });
     }
   }
 
@@ -243,13 +231,11 @@ export async function createConversationWithMessage({
       mentions,
     },
     contentFragments: contentFragments.map((cf) => ({
-      content: cf.content,
       title: cf.title,
-      url: null, // sourceUrl will be set on raw content upload success
-      contentType: cf.contentType,
       context: {
         profilePictureUrl: user.image,
       },
+      fileId: cf.fileId,
     })),
   };
 
@@ -276,44 +262,5 @@ export async function createConversationWithMessage({
 
   const conversationData = (await cRes.json()) as PostConversationsResponseBody;
 
-  if (conversationData.contentFragments.length > 0) {
-    for (const [i, cf] of conversationData.contentFragments.entries()) {
-      uploadRawContentFragment({
-        workspaceId: owner.sId,
-        conversationId: conversationData.conversation.sId,
-        contentFragmentId: cf.sId,
-        file: contentFragments[i].file,
-      });
-    }
-  }
-
   return new Ok(conversationData.conversation);
 }
-
-function uploadRawContentFragment({
-  workspaceId,
-  conversationId,
-  contentFragmentId,
-  file,
-}: {
-  workspaceId: string;
-  conversationId: string;
-  contentFragmentId: string;
-  file: File;
-}) {
-  const formData = new FormData();
-  formData.append("file", file);
-
-  // do not await, to avoid slowing the UX
-  // an error from this function does not prevent the conversation from continuing
-  // API errors are handled server side
-  fetch(
-    `/api/w/${workspaceId}/assistant/conversations/${conversationId}/messages/${contentFragmentId}/raw_content_fragment`,
-    {
-      method: "POST",
-      body: formData,
-    }
-  ).catch((e) => {
-    console.error(`Error uploading raw content for file`, e);
-  });
-}