Merge pull request #26 from NillionNetwork/feat/image-input-indicator

DevanandGowda · web-flow · commit c045c5a9f293 · 2025-09-10T15:45:26.000+05:30
Attachment input indicator
diff --git a/src/app/api/createMessage/route.ts b/src/app/api/createMessage/route.ts
@@ -13,7 +13,15 @@ export async function POST(request: NextRequest) {
     const auth = await requireAuth(request);
 
     const body = await request.json();
-    const { chat_id, role, order, timestamp, model, blindfoldContent } = body;
+    const {
+      chat_id,
+      role,
+      order,
+      timestamp,
+      model,
+      blindfoldContent,
+      attachments,
+    } = body;
 
     if (!chat_id || !role || !blindfoldContent || order === undefined) {
       return NextResponse.json(
@@ -42,6 +50,7 @@ export async function POST(request: NextRequest) {
       timestamp: timestamp,
       model: model,
       signature: "",
+      attachments,
     };
 
     const builder = await setupClient();
diff --git a/src/app/app/chat/[id]/page.tsx b/src/app/app/chat/[id]/page.tsx
@@ -52,6 +52,7 @@ export default function ChatPage({ params }: ChatPageProps) {
               return {
                 ...message,
                 content: result.content,
+                attachments: message?.attachments,
               };
             }),
           );
diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import type { ChatMessage as MessageType } from "../../types/chat";
+import getMessageAttachmentIcon from "../../utils/getMessageAttachmentIcon";
 
 interface ChatMessageProps {
   message: MessageType;
@@ -49,35 +50,52 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
   `;
 
   return (
-    <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-2`}>
-      <div className={bubbleClasses}>
-        <div className={markdownProseClasses}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {message.content as string}
-          </ReactMarkdown>
-          {isStreaming && !isUser && (
-            <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1 align-text-bottom" />
-          )}
+    <>
+      {message.attachments && message.attachments.length > 0 && (
+        <div className="flex gap-1 items-center !-mb-2 ml-auto w-fit">
+          <span className="text-neutral-500 text-xs">Attached</span>
+          <div className="flex gap-1 items-center">
+            {message.attachments.map((attachment) => {
+              const AttachmentIcon = getMessageAttachmentIcon(attachment);
+              return (
+                <div key={attachment}>
+                  <AttachmentIcon size={12} className="text-neutral-500" />
+                </div>
+              );
+            })}
+          </div>
         </div>
-
-        {!isUser && (
-          <div className="flex mt-2 space-x-2">
-            <button
-              onClick={() => copyToClipboard(message.content as string)}
-              className="p-1 text-neutral-500 hover:text-neutral-700"
-              title={isCopied ? "Copied!" : "Copy to clipboard"}
-            >
-              <Image
-                src={isCopied ? "/img/tick_icon.svg" : "/img/copy-icon.png"}
-                width={12}
-                height={12}
-                alt={isCopied ? "copied" : "copy-icon"}
-              />
-            </button>
+      )}
+      <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-2`}>
+        <div className={bubbleClasses}>
+          <div className={markdownProseClasses}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {message.content as string}
+            </ReactMarkdown>
+            {isStreaming && !isUser && (
+              <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1 align-text-bottom" />
+            )}
           </div>
-        )}
+
+          {!isUser && (
+            <div className="flex mt-2 space-x-2">
+              <button
+                onClick={() => copyToClipboard(message.content as string)}
+                className="p-1 text-neutral-500 hover:text-neutral-700"
+                title={isCopied ? "Copied!" : "Copy to clipboard"}
+              >
+                <Image
+                  src={isCopied ? "/img/tick_icon.svg" : "/img/copy-icon.png"}
+                  width={12}
+                  height={12}
+                  alt={isCopied ? "copied" : "copy-icon"}
+                />
+              </button>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/chat/StreamingChatArea.tsx b/src/components/chat/StreamingChatArea.tsx
@@ -9,6 +9,7 @@ import { useEncryption } from "@/hooks/useEncryption";
 import { LocalStorageService } from "@/services/LocalStorage";
 import { useStreamingChat } from "../../hooks/useStreamingChat";
 import type { ChatMessage as MessageType } from "../../types/chat";
+import type { TMessageAttachment } from "../../types/schemas";
 import ChatInput from "./ChatInput";
 import ChatMessage from "./ChatMessage";
 
@@ -209,12 +210,15 @@ const StreamingChatArea: React.FC<StreamingChatAreaProps> = ({
     }
   };
 
-  const createMessage = async (
-    chatId: string,
-    role: "user" | "assistant",
-    content: string,
-    order: number,
-  ) => {
+  const createMessage = async (message: {
+    chatId: string;
+    role: "user" | "assistant";
+    content: string;
+    order: number;
+    attachments?: TMessageAttachment[];
+  }) => {
+    const { chatId, role, content, order, attachments } = message;
+
     if (!user) {
       console.error("No authenticated user found");
       return;
@@ -246,6 +250,7 @@ const StreamingChatArea: React.FC<StreamingChatAreaProps> = ({
           model: DEFAULT_MODEL,
           creator: user?.id,
           blindfoldContent: blindfoldContent,
+          attachments,
         }),
       });
 
@@ -317,10 +322,17 @@ const StreamingChatArea: React.FC<StreamingChatAreaProps> = ({
         ? userMessage.content
         : userMessage.content.find((content) => content.type === "text")
             ?.text || "";
+    const userMessageAttachments: TMessageAttachment[] = imageDataUrl
+      ? ["image"]
+      : [];
 
     setMessages((prev) => [
       ...prev,
-      { ...userMessage, content: userMessageContentText },
+      {
+        ...userMessage,
+        content: userMessageContentText,
+        attachments: userMessageAttachments,
+      },
     ]);
 
     setTimeout(() => scrollToBottom(true), 100);
@@ -366,37 +378,39 @@ const StreamingChatArea: React.FC<StreamingChatAreaProps> = ({
               chatIdRef.current = newChatId.message;
 
               // Add the two messages to the chat
-              await createMessage(
-                newChatId.message,
-                "user",
-                userMessageContentText,
-                1,
-              );
-              await createMessage(
-                newChatId.message,
-                "assistant",
-                finalContent,
-                2,
-              );
+              await createMessage({
+                chatId: newChatId.message,
+                role: "user",
+                content: userMessageContentText,
+                order: 1,
+                attachments: userMessageAttachments,
+              });
+              await createMessage({
+                chatId: newChatId.message,
+                role: "assistant",
+                content: finalContent,
+                order: 2,
+              });
             }
 
             if (totalMessages === 4) {
               const currentChatId = chatIdRef.current || chatId;
 
               if (currentChatId) {
                 await Promise.all([
-                  createMessage(
-                    currentChatId,
-                    "user",
-                    userMessageContentText,
-                    totalMessages - 1,
-                  ),
-                  createMessage(
-                    currentChatId,
-                    "assistant",
-                    finalContent,
-                    totalMessages,
-                  ),
+                  createMessage({
+                    chatId: currentChatId,
+                    role: "user",
+                    content: userMessageContentText,
+                    order: totalMessages - 1,
+                    attachments: userMessageAttachments,
+                  }),
+                  createMessage({
+                    chatId: currentChatId,
+                    role: "assistant",
+                    content: finalContent,
+                    order: totalMessages,
+                  }),
                 ]);
 
                 setIsUpdatingChat(true);
@@ -426,22 +440,23 @@ const StreamingChatArea: React.FC<StreamingChatAreaProps> = ({
                 await Promise.all([
                   // ODD (User)
                   (totalMessages - 1) % 2 === 1
-                    ? createMessage(
-                        currentChatId,
-                        "user",
-                        userMessageContentText,
-                        totalMessages - 1,
-                      )
+                    ? createMessage({
+                        chatId: currentChatId,
+                        role: "user",
+                        content: userMessageContentText,
+                        order: totalMessages - 1,
+                        attachments: userMessageAttachments,
+                      })
                     : Promise.resolve(),
 
                   // EVEN (Assistant)
                   totalMessages % 2 === 0
-                    ? createMessage(
-                        currentChatId,
-                        "assistant",
-                        finalContent,
-                        totalMessages,
-                      )
+                    ? createMessage({
+                        chatId: currentChatId,
+                        role: "assistant",
+                        content: finalContent,
+                        order: totalMessages,
+                      })
                     : Promise.resolve(),
                 ]);
 
diff --git a/src/types/chat.ts b/src/types/chat.ts
@@ -1,3 +1,5 @@
+import type { TMessageAttachment } from "./schemas";
+
 export interface ITextContent {
   type: "text";
   text: string;
@@ -15,4 +17,5 @@ export type IChatMessageContent = ITextContent | IImageContent;
 export interface ChatMessage {
   role: "user" | "assistant";
   content: string | IChatMessageContent[];
+  attachments?: TMessageAttachment[];
 }
diff --git a/src/types/schemas.ts b/src/types/schemas.ts
@@ -16,6 +16,8 @@ export interface CHAT_SCHEMA {
   persona?: string;
 }
 
+export type TMessageAttachment = "image" | "pdf" | "csv" | "audio";
+
 export interface MESSAGES_SCHEMA {
   _id: string;
   chat_id: string;
@@ -29,4 +31,5 @@ export interface MESSAGES_SCHEMA {
   model: string;
   signature: string;
   token_count?: string;
+  attachments?: TMessageAttachment[];
 }
diff --git a/src/utils/getMessageAttachmentIcon.ts b/src/utils/getMessageAttachmentIcon.ts
@@ -0,0 +1,19 @@
+import { FileIcon, ImageIcon, Mic, Paperclip } from "lucide-react";
+import type { TMessageAttachment } from "../types/schemas";
+
+const AttachmentIcon: Record<TMessageAttachment, React.ElementType> = {
+  image: ImageIcon,
+  pdf: FileIcon,
+  csv: FileIcon,
+  audio: Mic,
+};
+
+const getMessageAttachmentIcon = (attachment: TMessageAttachment) => {
+  if (!AttachmentIcon[attachment]) {
+    return Paperclip;
+  }
+
+  return AttachmentIcon[attachment];
+};
+
+export default getMessageAttachmentIcon;

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@ export interface CHAT_SCHEMA {`
`16`	`16`	`persona?: string;`
`17`	`17`	`}`
`18`	`18`
	`19`	`+export type TMessageAttachment = "image" \| "pdf" \| "csv" \| "audio";`
	`20`	`+`
`19`	`21`	`export interface MESSAGES_SCHEMA {`
`20`	`22`	`_id: string;`
`21`	`23`	`chat_id: string;`
`@@ -29,4 +31,5 @@ export interface MESSAGES_SCHEMA {`
`29`	`31`	`model: string;`
`30`	`32`	`signature: string;`
`31`	`33`	`token_count?: string;`
	`34`	`+ attachments?: TMessageAttachment[];`
`32`	`35`	`}`