Layout updates and chat sidebar layout fixes #12

app/api/vision-agent/route.ts

@@ -1,62 +1,10 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai';
+import { StreamingTextResponse } from 'ai';
 
 import { auth } from '@/auth';
-import {
-  AIStream,
-  type AIStreamParser,
-  type AIStreamCallbacksAndOptions,
-} from 'ai';
 import { MessageBase } from '../../../lib/types';
-import { fetcher } from '@/lib/utils';
 
 export const runtime = 'edge';
 
-function parseVisionAgentStream(): AIStreamParser {
-  let previous = '';
-
-  return data => {
-    console.log('[Ming] ~ parseVisionAgentStream ~ data:', data);
-    // const json = JSON.parse(data) as {
-    //   completion: string;
-    //   stop: string | null;
-    //   stop_reason: string | null;
-    //   truncated: boolean;
-    //   log_id: string;
-    //   model: string;
-    //   exception: string | null;
-    // };
-
-    // // Anthropic's `completion` field is cumulative unlike OpenAI's
-    // // deltas. In order to compute the delta, we must slice out the text
-    // // we previously received.
-    // const text = json.completion;
-    // console.log('[Ming] ~ parseVisionAgentStream ~ text:', text);
-    // const delta = text.slice(previous.length);
-    // previous = text;
-
-    return data;
-  };
-}
-
-function visionAgentStream(
-  res: Response,
-  cb?: AIStreamCallbacksAndOptions,
-): ReadableStream {
-  return AIStream(res, parseVisionAgentStream(), cb);
-}
-
-function readChunks(reader: any) {
-  return {
-    async *[Symbol.asyncIterator]() {
-      let readResult = await reader.read();
-      while (!readResult.done) {
-        yield readResult.value;
-        readResult = await reader.read();
-      }
-    },
-  };
-}
-
 export async function POST(req: Request) {
   const json = await req.json();
   const { messages, url } = json as {
@@ -88,8 +36,6 @@ export async function POST(req: Request) {
     },
   );
 
-  // console.log('[Ming] ~ POST ~ fetchResponse:', fetchResponse);
-
   if (fetchResponse.body) {
     return new StreamingTextResponse(fetchResponse.body);
   } else {

app/chat/layout.tsx

@@ -1,3 +1,4 @@
+import { ThemeToggle } from '@/components/ThemeToggle';
 import ChatSidebarList from '@/components/chat-sidebar/ChatListSidebar';
 import Loading from '@/components/ui/Loading';
 import { Suspense } from 'react';
@@ -11,7 +12,7 @@ export default async function Layout({ children }: ChatLayoutProps) {
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
       <div
         data-state="open"
-        className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
+        className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] h-full flex-col overflow-auto py-2"
       >
         <Suspense fallback={<Loading />}>
           <ChatSidebarList />

app/layout.tsx

@@ -12,8 +12,8 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 export const metadata = {
   metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
   title: {
-    default: 'Insight Playground',
-    template: `%s - Insight Playground`,
+    default: 'Vision Agent',
+    template: `%s - Vision Agent`,
   },
   description: 'By Landing AI',
   icons: {

components/Providers.tsx

@@ -4,11 +4,15 @@ import * as React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { ThemeProviderProps } from 'next-themes/dist/types';
 import { TooltipProvider } from '@/components/ui/Tooltip';
+import { ThemeToggle } from './ThemeToggle';
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider {...props}>
-      <TooltipProvider>{children}</TooltipProvider>
+      <TooltipProvider>
+        {children}
+        <ThemeToggle />
+      </TooltipProvider>
     </NextThemesProvider>
   );
 }

components/ThemeToggle.tsx

@@ -21,7 +21,7 @@ export function ThemeToggle() {
         });
       }}
     >
-      {!theme ? null : theme === 'dark' ? (
+      {theme === 'dark' ? (
         <IconMoon className="transition-all" />
       ) : (
         <IconSun className="transition-all" />

components/chat-sidebar/ChatCard.tsx

@@ -1,27 +1,43 @@
 'use client';
 
+import { PropsWithChildren } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { cn } from '@/lib/utils';
 import { ChatEntity } from '@/lib/types';
 import Image from 'next/image';
+import clsx from 'clsx';
 
-export interface ChatCardProps {
+type ChatCardProps = PropsWithChildren<{
   chat: ChatEntity;
-}
+}>;
 
-const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
-  const { chatId: chatIdFromParam } = useParams();
-  const { id, url, messages, user } = chat;
+export const ChatCardLayout: React.FC<
+  PropsWithChildren<{ link: string; classNames?: clsx.ClassValue }>
+> = ({ link, children, classNames }) => {
   return (
     <Link
       className={cn(
-        'p-2 m-2 bg-white l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
-        chatIdFromParam === id && 'border-gray-500',
+        'p-2 m-2 bg-background l:h-[250px] rounded-xl shadow-md flex items-center border border-transparent hover:border-gray-500 transition-all cursor-pointer',
+        classNames,
       )}
-      href={`/chat/${id}`}
+      href={link}
     >
-      <div className="overflow-hidden flex items-center">
+      {children}
+    </Link>
+  );
+};
+
+const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
+  const { id: chatIdFromParam } = useParams();
+  const { id, url, messages, user } = chat;
+  const firstMessage = messages?.[0]?.content.slice(0, 50);
+  return (
+    <ChatCardLayout
+      link={`/chat/${id}`}
+      classNames={chatIdFromParam === id && 'border-gray-500'}
+    >
+      <div className="overflow-hidden flex items-center size-full">
         <Image
           src={url}
           alt={url}
@@ -29,11 +45,11 @@ const ChatCard: React.FC<ChatCardProps> = ({ chat }) => {
           height={50}
           className="rounded w-1/4 "
         />
-        <p className="text-xs text-gray-500 w-3/4 ml-2">
-          {messages?.[0]?.content.slice(0, 50) + ' ...' ?? 'new chat'}
+        <p className="text-sm w-3/4 ml-3">
+          {firstMessage ? firstMessage + ' ...' : '(No messages yet)'}
         </p>
       </div>
-    </Link>
+    </ChatCardLayout>
   );
 };
 

components/chat-sidebar/ChatListSidebar.tsx

@@ -1,5 +1,6 @@
 import { getKVChats } from '@/lib/kv/chat';
-import ChatCard from './ChatCard';
+import ChatCard, { ChatCardLayout } from './ChatCard';
+import { IconPlus } from '../ui/Icons';
 
 export interface ChatSidebarListProps {}
 
@@ -7,6 +8,12 @@ export default async function ChatSidebarList({}: ChatSidebarListProps) {
   const chats = await getKVChats();
   return (
     <>
+      <ChatCardLayout link="/chat">
+        <div className="overflow-hidden flex items-center size-full">
+          <IconPlus className="w-1/4 font-bold" />
+          <p className="text-sm w-3/4 ml-3 font-bold">New chat</p>
+        </div>
+      </ChatCardLayout>
       {chats.map(chat => (
         <ChatCard key={chat.id} chat={chat} />
       ))}

components/chat/index.tsx

@@ -19,23 +19,19 @@ export function Chat({ chat }: ChatProps) {
 
   return (
     <>
-      <div className={cn('pb-[150px] pt-4 md:pt-10 h-full')}>
-        <div className="flex h-full">
-          <div className="w-1/2 relative border-r border-gray-400 overflow-auto p-4 flex items-center justify-center">
-            <div className="max-h-[600px] size-full relative">
-              <Image
-                draggable={false}
-                src={url}
-                alt={url}
-                fill
-                className="object-contain"
-              />
-            </div>
-          </div>
-          <div className="w-1/2 relative overflow-auto">
-            <ChatList messages={messages} />
-            <ChatScrollAnchor trackVisibility={isLoading} />
-          </div>
+      <div className={cn('pb-[150px] h-full')}>
+        <div className="relative border-b border-gray-400 overflow-auto p-4 flex flex-row items-start h-[300px]">
+          <Image
+            draggable={false}
+            src={url}
+            alt={url}
+            fill
+            className="object-contain"
+          />
+        </div>
+        <div className="overflow-auto">
+          <ChatList messages={messages} />
+          <ChatScrollAnchor trackVisibility={isLoading} />
         </div>
       </div>
       <ChatPanel

components/ui/Icons.tsx

@@ -511,7 +511,7 @@ function IconLoading({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
       aria-hidden="true"
-      className="size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600"
+      className="size-8 text-gray-200 animate-spin fill-gray-600"
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"