fix: UI improvements

Author: sunjay-dev

.github/workflows/docker-build-manual.yaml

@@ -25,3 +25,4 @@ jobs:
           platforms: linux/arm64
           push: true
           tags: sunjay195/chatty-ai-backend:latest
+          cache-to: type=gha,mode=max

.github/workflows/docker-build-push.yaml

@@ -68,6 +68,7 @@ jobs:
           platforms: linux/arm64
           push: true
           tags: sunjay195/chatty-ai-backend:latest
+          cache-to: type=gha,mode=max
           labels: |
             git_commit_sha=${{ github.sha }}
             git_commit_short=${{ steps.meta.outputs.short_sha }}

backend/src/controllers/message.controllers.ts

@@ -2,8 +2,38 @@ import { type Context } from "hono";
 import { scheduleMemoryExtraction, generateAIResponse, extractImageData } from "../utils/model.utils.js";
 import prisma from "../config/prisma.config.js";
 import { NotFoundError } from "../utils/appError.utils.js";
-import { streamText } from "hono/streaming";
+import { streamText as honoStreamText } from "hono/streaming";
 import logger from "../utils/logger.utils.js";
+import { streamLoading, streamText, streamError } from "../utils/stream.utils.js";
+import { type UploadedFile } from "@app/shared/src/schemas/message.schema.js"
+
+async function handleImageExtraction(messageFiles: UploadedFile[], stream: any): Promise<string> {
+  if (messageFiles?.length === 0) return "";
+
+  try {
+    await streamLoading(stream, "Analyzing image...");
+    const extractionPromises = messageFiles.map((file: UploadedFile) => {
+      if (file.fileUrl) {
+        return extractImageData(file.fileUrl);
+      }
+      return Promise.resolve(null);
+    });
+
+    const extractionResults = await Promise.allSettled(extractionPromises);
+
+    const successfulData = extractionResults
+      .filter((result) => result.status === "fulfilled" && result.value)
+      .map((result: any) => result.value as string);
+
+    if (successfulData.length > 0) {
+      return `\n\nExtracted information from attached images:\n${successfulData.join("\n---\n")}\n\nUse this information if relevant when answering.`;
+    }
+  } catch (error) {
+    logger.error({ message: "Failed to process attached images", error });
+  }
+
+  return "";
+}
 
 export async function handleUserMessageResponse(c: Context) {
   const requestStartTime = new Date();
@@ -12,33 +42,11 @@ export async function handleUserMessageResponse(c: Context) {
   const { query, model, messageFiles } = c.get("body");
   const timezone = c.req.header("x-client-timezone") || "UTC";
 
-  return streamText(c, async (stream) => {
+  return honoStreamText(c, async (stream) => {
     let fullResponse = "";
     let finalQuery = query;
 
-    try {
-      if (messageFiles && Array.isArray(messageFiles) && messageFiles.length > 0) {
-        await stream.write(JSON.stringify({ type: "loading", content: "Analyzing image..." }) + "\n");
-        const extractionPromises = messageFiles.map((file: any) => {
-          if (file.fileUrl) {
-            return extractImageData(file.fileUrl);
-          }
-          return Promise.resolve(null);
-        });
-
-        const extractionResults = await Promise.allSettled(extractionPromises);
-
-        const successfulData = extractionResults
-          .filter((result) => result.status === "fulfilled" && result.value)
-          .map((result: any) => result.value as string);
-
-        if (successfulData.length > 0) {
-          finalQuery += `\n\nExtracted information from attached images:\n${successfulData.join("\n---\n")}\n\nUse this information if relevant when answering.`;
-        }
-      }
-    } catch (error) {
-      logger.error({ message: "Failed to process attached images", error });
-    }
+    finalQuery += await handleImageExtraction(messageFiles, stream);
 
     try {
       const [chat, preferences, memories] = await Promise.all([
@@ -48,7 +56,7 @@ export async function handleUserMessageResponse(c: Context) {
       ]);
 
       if (!chat) {
-        await stream.write(JSON.stringify({ type: "error", content: "Chat not found or unauthorized" }) + "\n");
+        await streamError(stream, "Chat not found or unauthorized");
         return;
       }
 
@@ -64,15 +72,15 @@ export async function handleUserMessageResponse(c: Context) {
       let isFirstChunk = true;
       for await (const chunk of aiStream) {
         if (isFirstChunk) {
-          await stream.write(JSON.stringify({ type: "loading", content: null }) + "\n");
+          await streamLoading(stream, null);
           isFirstChunk = false;
         }
         fullResponse += chunk;
-        await stream.write(JSON.stringify({ type: "text", content: chunk }) + "\n");
+        await streamText(stream, chunk);
       }
 
       if (isFirstChunk) {
-        await stream.write(JSON.stringify({ type: "loading", content: null }) + "\n");
+        await streamLoading(stream, null);
       }
 
       const filesToCreate = messageFiles?.length ? messageFiles : undefined;
@@ -84,7 +92,7 @@ export async function handleUserMessageResponse(c: Context) {
           messages: {
             create: [
               {
-                text: finalQuery,
+                text: query,
                 role: "USER",
                 createdAt: requestStartTime,
                 messageFiles: filesToCreate ? { create: filesToCreate } : undefined,
@@ -102,7 +110,7 @@ export async function handleUserMessageResponse(c: Context) {
         chatId,
         error: error.message,
       });
-      await stream.write(JSON.stringify({ type: "error", content: "Response generation interrupted" }) + "\n");
+      await streamError(stream, "Response generation interrupted");
     }
   });
 }

backend/src/utils/stream.utils.ts

@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Streamable = { write: (str: string) => Promise<any> };
+
+type StreamEventType = "text" | "loading" | "error";
+
+type StreamEvent =
+    | { type: "text"; content: string }
+    | { type: "loading"; content: string | null }
+    | { type: "error"; content: string };
+
+export function streamEvent(stream: Streamable, event: StreamEvent): Promise<void> {
+    return stream.write(JSON.stringify(event) + "\n");
+}
+
+export function streamText(stream: Streamable, content: string): Promise<void> {
+    return streamEvent(stream, { type: "text", content });
+}
+
+export function streamLoading(stream: Streamable, content: string | null): Promise<void> {
+    return streamEvent(stream, { type: "loading", content });
+}
+
+export function streamError(stream: Streamable, content: string): Promise<void> {
+    return streamEvent(stream, { type: "error", content });
+}
+
+export type { StreamEventType, StreamEvent };

frontend/index.html

@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/webp" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sleek AI</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/webp" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sleek AI</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

frontend/src/components/messages/ModelMessage.tsx

@@ -59,7 +59,7 @@ type Props = {
 export default memo(function ModelMessage({ text, status, isCopied, onCopy, onResend, hideToolTip, isGenerating }: Props) {
 
   return (
-    <div className="max-w-full text-sm py-4 rounded-xl">
+    <div className="max-w-full text-base md:text-sm py-4 rounded-xl">
       {isGenerating && text.length === 0 && !status ? (
         <span className="inline-block animate-pulse font-bold">▍</span>
       ) : (

frontend/src/components/messages/UserMessage.tsx

@@ -89,7 +89,7 @@ export default memo(function UserMessage({ message, isCopied, onCopy }: Props) {
             </button>
           )}
 
-          <p className="text-sm leading-normal whitespace-pre-wrap break-words">{displayedText}</p>
+          <p className="text-base md:text-sm leading-normal whitespace-pre-wrap break-words">{displayedText}</p>
         </div>
       )}
 

frontend/src/components/sidebars/Sidebar.tsx

@@ -80,7 +80,7 @@ export default function Sidebar({ chats, isFetchingChats, onDeleteRequest, onRen
 
   return (
     <>
-      {isMobile && !collapsed && <div className="fixed inset-0 bg-black/40 z-10" onClick={() => setCollapsed(true)} />}
+      {isMobile && !collapsed && <div className="fixed inset-0 bg-black/40 z-20" onClick={() => setCollapsed(true)} />}
       <aside
         ref={sidebarRef}
         className="fixed md:relative h-dvh w-3/4 sm:w-64 rounded-r-3xl sm:rounded-r-none bg-dark border-r border-gray-500/20 flex flex-col z-30 shrink-0"

frontend/src/styles/index.css

@@ -60,6 +60,7 @@ body {
 .text-secondary {
   color: #fbfbfb;
 }
+
 /* 
 .word-break {
   word-break: break-word;
@@ -249,7 +250,14 @@ img {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
+
+@media (max-width: 640px) {
+  textarea {
+    height: 40px;
+  }
+}

shared/src/schemas/message.schema.ts

@@ -13,3 +13,7 @@ export const messageSchema = z.object({
 
   messageFiles: z.array(uploadedFileSchema).optional().default([]),
 });
+
+export type UploadedFile = z.infer<typeof uploadedFileSchema>;
+
+export type Message = z.infer<typeof messageSchema>;