feat: improve mobile functionality and chat experience

- Add mobile notebook feature parity with desktop
- Implement audio generation in mobile studio
- Add proper source dialog and management
- Add chat history and initial messages support
- Improve note handling and display
- Fix chat scroll behavior to always show latest messages
- Add missing UI components and dependencies

src/app/api/chat/history/route.ts

@@ -32,6 +32,9 @@ export async function GET(req: Request) {
     const chats = await prisma.chat.findMany({
       where: {
         notebookId,
+        notebook: {
+          userId
+        }
       },
       include: {
         messages: {
@@ -43,16 +46,16 @@ export async function GET(req: Request) {
       orderBy: {
         createdAt: "desc",
       },
-      take: 1,
     });
 
-    const messages =
-      chats.length > 0
-        ? chats[0].messages.map((msg) => ({
-            role: msg.role.toLowerCase(),
-            content: msg.content,
-          }))
-        : [];
+    // Combine all messages from all chats, ordered by creation time
+    const messages = chats
+      .flatMap(chat => chat.messages)
+      .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
+      .map(msg => ({
+        role: msg.role.toLowerCase(),
+        content: msg.content,
+      }));
 
     // Cache in Redis if available
     if (redis) {

src/app/api/chat/route.ts

@@ -4,6 +4,7 @@ import { NextResponse } from "next/server";
 import Cerebras from "@cerebras/cerebras_cloud_sdk";
 import { setChatHistory } from "@/lib/redis-utils";
 import { prisma } from "@/lib/db";
+import { DEFAULT_MODEL, MODEL_SETTINGS } from "@/lib/ai-config";
 
 const getClient = () => {
   if (!process.env.CEREBRAS_API_KEY) {
@@ -14,6 +15,15 @@ const getClient = () => {
   });
 };
 
+interface ResponseChunk {
+  choices?: Array<{
+    finish_reason?: string;
+    message: {
+      content: string;
+    };
+  }>;
+}
+
 export async function POST(req: Request) {
   try {
     const { userId } = await auth();
@@ -22,7 +32,7 @@ export async function POST(req: Request) {
     }
 
     const body = await req.json();
-    const { messages, notebookId } = body;
+    const { messages, notebookId, modelId } = body;
 
     // Validate messages
     if (!Array.isArray(messages) || messages.length === 0) {
@@ -33,7 +43,7 @@ export async function POST(req: Request) {
     }
 
     // Save to database first
-    await prisma.chat.create({
+    const chat = await prisma.chat.create({
       data: {
         notebookId,
         messages: {
@@ -49,19 +59,41 @@ export async function POST(req: Request) {
     await setChatHistory(userId, notebookId, messages);
 
     const client = getClient();
-    const completionResponse = await client.chat.completions.create({
+    console.log('Sending request with messages:', messages);
+    const response = await client.chat.completions.create({
       messages: messages.map((msg) => ({
-        role: msg.role,
+        role: msg.role.toLowerCase(),
         content: msg.content,
       })),
-      model: "llama3.3-70b",
-      temperature: 0.7,
-      max_tokens: 1000,
+      model: modelId || DEFAULT_MODEL.id,
+      ...MODEL_SETTINGS,
+    }) as ResponseChunk;
+
+    console.log('Got response:', response);
+
+    if (!response.choices?.[0]?.message?.content) {
+      throw new Error('Invalid response from chat completion API');
+    }
+
+    // Save the assistant's response to the database
+    await prisma.chat.update({
+      where: { id: chat.id },
+      data: {
+        messages: {
+          create: {
+            role: "ASSISTANT",
+            content: response.choices[0].message.content,
+          },
+        },
+      },
     });
 
-    return NextResponse.json(completionResponse);
+    return NextResponse.json(response);
   } catch (error) {
-    console.error("[CHAT_ERROR]", error);
-    return new NextResponse("Internal Error", { status: 500 });
+    console.error('Error in chat completion:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'An error occurred' },
+      { status: 500 }
+    );
   }
 }

src/app/globals.css

@@ -75,6 +75,28 @@
   }
 }
 
+/* Custom scrollbar styles */
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+.scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
+  background-color: #4B5563;
+  border-radius: 6px;
+}
+
+.scrollbar-track-transparent::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
 .custom-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #4a4a4a #2a2a2a;
@@ -98,3 +120,24 @@
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: #5a5a5a;
 }
+
+/* Debug styles */
+.debug-scroll {
+  outline: 2px solid red;
+  min-height: 0;
+  height: 100%;
+}
+
+.debug-scroll::-webkit-scrollbar {
+  width: 8px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.debug-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.debug-scroll::-webkit-scrollbar-track {
+  background-color: transparent;
+}