feat: Restruct Composer and Homepage (#64)


app/api/vision-agent/route.ts

@@ -17,11 +17,10 @@ export const POST = withLogging(
       messages: MessageBase[];
       id: string;
       mediaUrl: string;
-      enableSelfReflection: boolean;
     },
     request,
   ) => {
-    const { messages, mediaUrl, enableSelfReflection } = json;
+    const { messages, mediaUrl } = json;
 
     // const session = await auth();
     // if (!session?.user?.email) {
@@ -56,7 +55,7 @@ export const POST = withLogging(
     formData.append('image', mediaUrl);
 
     const fetchResponse = await fetch(
-      `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&visualize_output=true&self_reflection=${enableSelfReflection}`,
+      `https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent&self_reflection=false`,
       // `http://localhost:5001/v1/agent/chat?agent_class=vision_agent&self_reflection=${enableSelfReflection}`,
       {
         method: 'POST',

app/chat/page.tsx

@@ -1,25 +1,14 @@
 'use client';
 
-import ImageSelector from '@/components/chat/ImageSelector';
 import { generateInputImageMarkdown } from '@/lib/messageUtils';
-import { fetcher } from '@/lib/utils';
 import { useRouter } from 'next/navigation';
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/Tooltip';
-import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
-import Link from 'next/link';
-import { Button } from '@/components/ui/Button';
-import Img from '@/components/ui/Img';
 import { MessageRaw } from '@/lib/db/types';
-import { dbPostCreateChat } from '@/lib/db/functions';
 import { useState } from 'react';
-import Loading from '@/components/ui/Loading';
+import { Composer } from '@/components/chat/Composer';
+import { dbPostCreateChat } from '@/lib/db/functions';
+import { nanoid } from '@/lib/utils';
 
-// const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
 const EXAMPLE_URL =
   'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png';
 const EXAMPLE_HEADER = 'Count and find';
@@ -51,77 +40,35 @@ const exampleMessages = [
 
 export default function Page() {
   const router = useRouter();
-  const [isUploading, setUploading] = useState<false | Number>(false);
   return (
-    <div className="mx-auto max-w-2xl px-4 mt-8">
-      <div className="rounded-lg border bg-background p-8 mb-6">
-        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
-        <p>
-          Vision Agent is a library that helps you utilize agent frameworks for
-          your vision tasks. Vision Agent aims to provide an in-seconds
-          experience by allowing users to describe their problem in text and
-          utilizing agent frameworks to solve the task for them.
-        </p>
-        <div className="my-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="link" size="icon" asChild className="mr-2">
-                <Link
-                  href="https://github.com/landing-ai/vision-agent"
-                  target="_blank"
-                >
-                  <IconGitHub className="size-6" />
-                </Link>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Github</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="link" size="icon" asChild className="mr-2">
-                <Link href="https://discord.gg/wZ2A7J69" target="_blank">
-                  <IconDiscord className="size-6" />
-                </Link>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Discord</TooltipContent>
-          </Tooltip>
-        </div>
-        <ImageSelector />
-      </div>
-      <div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
-        {exampleMessages.map((example, index) => (
-          <div
-            key={index}
-            className={`relative cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
-              index > 1 && 'hidden md:block'
-            }`}
-            onClick={async () => {
-              setUploading(index);
-              const resp = await dbPostCreateChat({
-                mediaUrl: example.url,
-                initMessages: example.initMessages,
-                title: example.heading,
-              });
-              setUploading(false);
-              if (resp) {
-                router.push(`/chat/${resp.id}`);
-              }
-            }}
-          >
-            {isUploading === index && (
-              <div className="absolute top-0 left-0 size-full flex items-center justify-center bg-white/60">
-                <Loading />
-              </div>
-            )}
-            <Img src={example.url} alt="example images" className="w-1/4" />
-            <div className="flex items-start flex-col h-full ml-3 w-3/4">
-              <div className="text-sm font-semibold">{example.heading}</div>
-              <div className="text-sm text-zinc-600">{example.subheading}</div>
-            </div>
-          </div>
-        ))}
-      </div>
+    <div className="mx-auto w-[1024px] max-w-full px-4 mt-[200px]">
+      <h1 className="mb-4 text-5xl text-center">Vision Agent</h1>
+      <h4 className="mb-8 text-center">
+        Generate code to solve your vision problem with simple prompts.
+      </h4>
+      <Composer
+        onSubmit={async ({ input, mediaUrl }) => {
+          const newId = nanoid();
+          const resp = await dbPostCreateChat({
+            id: newId,
+            mediaUrl: mediaUrl,
+            title: `conversation-${newId}`,
+            initMessages: [
+              {
+                role: 'user',
+                content:
+                  input +
+                  (mediaUrl
+                    ? '\n\n' + generateInputImageMarkdown(mediaUrl)
+                    : ''),
+              },
+            ],
+          });
+          if (resp) {
+            router.push(`/chat/${newId}`);
+          }
+        }}
+      />
     </div>
   );
 }

app/layout.tsx

@@ -53,7 +53,7 @@ export default function RootLayout(props: RootLayoutProps) {
         >
           <div className="flex flex-col min-h-screen">
             <Header />
-            <main className="flex py-8 h-[calc(100vh-64px)] bg-muted/50 overflow-hidden relative">
+            <main className="flex py-8 h-[calc(100vh-64px)] bg-background overflow-hidden relative">
               {children}
             </main>
           </div>

components/Header.tsx

@@ -12,6 +12,12 @@ import LandingLogo from '@/assets/svg/LandingAI_white.svg';
 import ChatSelectServer from './ChatSelectServer';
 import Loading from './ui/Loading';
 import { Skeleton } from './ui/Skeleton';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
 
 export async function Header() {
   const session = await auth();
@@ -64,6 +70,29 @@ export async function Header() {
       <Button variant="link" asChild className="mr-2">
         <Link href="/chat">New conversation</Link>
       </Button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="link" size="icon" asChild className="mr-2">
+            <Link
+              href="https://github.com/landing-ai/vision-agent"
+              target="_blank"
+            >
+              <IconGitHub className="size-5" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Github</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="link" size="icon" asChild className="mr-2">
+            <Link href="https://discord.gg/wZ2A7J69" target="_blank">
+              <IconDiscord className="size-5" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Discord</TooltipContent>
+      </Tooltip>
       <IconSeparator className="size-6 text-muted-foreground/50" />
       <div className="flex items-center grow-0">
         {session?.user ? <UserMenu user={session!.user} /> : <LoginMenu />}

components/chat/ChatClient.tsx

@@ -5,9 +5,13 @@ import { Composer } from '@/components/chat/Composer';
 import useVisionAgent from '@/lib/hooks/useVisionAgent';
 import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
 import { Session } from 'next-auth';
-import { useState } from 'react';
+import { useEffect } from 'react';
 import { ChatWithMessages } from '@/lib/db/types';
 import { ChatMessage } from './ChatMessage';
+import { Button } from '../ui/Button';
+import { cn } from '@/lib/utils';
+import { IconArrowDown } from '../ui/Icons';
+import { generateInputImageMarkdown } from '@/lib/messageUtils';
 
 export interface ChatClientProps {
   chat: ChatWithMessages;
@@ -15,15 +19,21 @@ export interface ChatClientProps {
 
 const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
   const { mediaUrl, id } = chat;
-  const { messages, append, reload, stop, isLoading, input, setInput } =
-    useVisionAgent(chat);
+  const { messages, append, isLoading, reload } = useVisionAgent(chat);
 
-  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+  const { messagesRef, scrollRef, visibilityRef, isVisible, scrollToBottom } =
     useScrollAnchor();
 
+  // Scroll to bottom when messages are loading
+  useEffect(() => {
+    if (isLoading && messages.length) {
+      scrollToBottom();
+    }
+  }, [isLoading, scrollToBottom, messages]);
+
   return (
     <div
-      className="h-full overflow-auto mx-auto max-w-5xl min-w-3xl border rounded-lg"
+      className="h-full overflow-auto mx-auto w-[1024px] max-w-full border rounded-lg relative"
       ref={scrollRef}
     >
       <div className="overflow-auto h-full pt-6 px-6" ref={messagesRef}>
@@ -36,21 +46,37 @@ const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
               isLoading={isLoading && index === messages.length - 1}
             />
           ))}
-        <div className="h-px w-full" ref={visibilityRef} />
+        <div className="h-[108px] w-full" ref={visibilityRef} />
       </div>
-      <div className="sticky bottom-3 w-full">
+      <div className="absolute bottom-3 w-full">
         <Composer
           id={id}
           mediaUrl={mediaUrl}
           isLoading={isLoading}
-          stop={stop}
-          append={append}
-          reload={reload}
-          messages={messages}
-          input={input}
-          setInput={setInput}
+          onSubmit={async ({ input, mediaUrl: newMediaUrl }) => {
+            append({
+              id,
+              content:
+                input +
+                (newMediaUrl
+                  ? '\n\n' + generateInputImageMarkdown(newMediaUrl)
+                  : ''),
+              role: 'user',
+            });
+          }}
         />
       </div>
+      {/* Scroll to bottom Icon */}
+      <Button
+        size="icon"
+        className={cn(
+          'absolute bottom-3 right-3 transition-opacity duration-300 size-6',
+          isVisible ? 'opacity-0' : 'opacity-100',
+        )}
+        onClick={() => scrollToBottom()}
+      >
+        <IconArrowDown className="size-3" />
+      </Button>
     </div>
   );
 };

components/chat/ChatMessage.tsx

@@ -138,23 +138,18 @@ const Markdown: React.FC<{
   );
 };
 
-export function ChatMessage({
-  message,
-  isLoading,
-}: ChatMessageProps) {
+export function ChatMessage({ message, isLoading }: ChatMessageProps) {
   const { content } = useMemo(() => {
     return getCleanedUpMessages({
       content: message.content,
       role: message.role,
     });
   }, [message.content, message.role]);
-  console.log('[Ming] content:', content);
-  console.log('[Ming] raw:', message.content);
   const [details, setDetails] = useState<string>('');
   return (
     <div
       className={cn(
-        'group relative mb-6 flex rounded-md bg-muted px-4 py-6 w-3/5',
+        'group relative mb-6 flex rounded-md bg-muted p-4',
         message.role === 'user' ? 'ml-auto mr-0 w-3/5' : 'w-4/5',
       )}
     >

components/chat/Composer.tsx

@@ -1,11 +1,8 @@
 'use client';
 
-import * as React from 'react';
-import { type UseChatHelpers } from 'ai/react';
-import Textarea from 'react-textarea-autosize';
+import { useState, useEffect, useRef } from 'react';
 
 import { Button } from '@/components/ui/Button';
-import { MessageBase } from '../../lib/types';
 import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
 import Img from '../ui/Img';
 import {
@@ -14,85 +11,126 @@ import {
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
 import {
-  IconArrowDown,
   IconArrowElbow,
   IconImage,
+  IconArrowUp,
   IconRefresh,
   IconStop,
+  IconClose,
 } from '@/components/ui/Icons';
 import { cn } from '@/lib/utils';
 import { generateInputImageMarkdown } from '@/lib/messageUtils';
 import { Switch } from '../ui/Switch';
 import Chip from '../ui/Chip';
+import Textarea from 'react-textarea-autosize';
+import useMediaUpload from '@/lib/hooks/useMediaUpload';
 
-export interface ComposerProps
-  extends Pick<
-    UseChatHelpers,
-    'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
-  > {
+export interface ComposerProps {
+  onSubmit: (params: { input: string; mediaUrl: string }) => Promise<void>;
+  isLoading?: boolean;
   id?: string;
   title?: string;
-  messages: MessageBase[];
   mediaUrl?: string;
 }
 
-export function Composer({
-  id,
-  isLoading,
-  append,
-  input,
-  setInput,
-  mediaUrl,
-  // isAtBottom,
-}: ComposerProps) {
+export function Composer({ id, isLoading, onSubmit, mediaUrl }: ComposerProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
-  const inputRef = React.useRef<HTMLTextAreaElement>(null);
-  React.useEffect(() => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [localMediaUrl, setLocalMediaUrl] = useState<string | undefined>(
+    mediaUrl,
+  );
+  // For local loading state such as submitting
+  const [localLoading, setLocalLoading] = useState<boolean>(false);
+  const [input, setInput] = useState('');
+  const noMediaValidation = !localMediaUrl && !!input;
+  const { getRootProps, getInputProps, isDragActive, isUploading, openUpload } =
+    useMediaUpload(uploadUrl => setLocalMediaUrl(uploadUrl));
+
+  const finalLoading = isLoading || isUploading || localLoading;
+
+  useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus();
     }
   }, []);
 
-  const mediaName = mediaUrl?.split('/').pop();
+  const mediaName = localMediaUrl?.split('/').pop();
   return (
-    <div className="size-full mx-auto max-w-2xl px-6 py-3 space-y-4 bg-zinc-700 rounded-xl relative shadow-lg shadow-zinc-800/40">
-      {mediaUrl && (
-        <Tooltip>
-          <TooltipTrigger>
-            <Chip>
-              <div className="flex flex-row items-center">
-                <IconImage className="size-3 mr-1" />
-                <p>{mediaName ?? 'media(0)'}</p>
-              </div>
-            </Chip>
-          </TooltipTrigger>
-          <TooltipContent sideOffset={20}>
-            <Img
-              src={mediaUrl}
-              className="m-1"
-              quality={100}
-              alt="zoomed-in-image"
-            />
-          </TooltipContent>
-        </Tooltip>
+    <div
+      {...getRootProps()}
+      className={cn(
+        'w-full mx-auto max-w-2xl px-6 py-4 bg-zinc-700 rounded-xl relative shadow-lg shadow-zinc-700/40',
+        isDragActive && 'bg-indigo-700/50',
+      )}
+    >
+      <input {...getInputProps()} />
+      <div
+        className={cn(
+          'w-1/3 h-1 rounded-full overflow-hidden bg-zinc-700 absolute left-1/2 -translate-x-1/2',
+          finalLoading ? 'opacity-100' : 'opacity-0',
+        )}
+      >
+        <div className="h-full bg-primary animate-progress origin-left-right" />
+      </div>
+      {localMediaUrl ? (
+        <Chip className="mb-0.5">
+          <div className="flex flex-row items-center space-x-2">
+            <Tooltip>
+              <TooltipTrigger>
+                <div className="flex flex-row items-center space-x-2">
+                  <IconImage className="size-3" />
+                  <p>{mediaName ?? 'unnamed_media'}</p>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={8}>
+                <Img
+                  src={localMediaUrl}
+                  className="m-1"
+                  quality={100}
+                  alt="zoomed-in-image"
+                />
+              </TooltipContent>
+            </Tooltip>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="size-4"
+              onClick={() => setLocalMediaUrl(undefined)}
+            >
+              <IconClose className="size-3" />
+            </Button>
+          </div>
+        </Chip>
+      ) : (
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(
+            'ml-[-10px] border-2 border-transparent',
+            noMediaValidation && 'border-red-500/50 border-2 text-red-500',
+          )}
+          onClick={openUpload}
+        >
+          <IconImage className="mr-2 size-4" />
+          {noMediaValidation ? 'Select media (required)' : 'Select media'}
+        </Button>
       )}
       <form
         onSubmit={async e => {
           e.preventDefault();
-          if (!input?.trim()) {
+          if (!input?.trim() || !localMediaUrl) {
             return;
           }
-          setInput('');
-          await append({
-            id,
-            content:
-              input +
-              (mediaUrl ? '\n\n' + generateInputImageMarkdown(mediaUrl) : ''),
-            role: 'user',
-          });
+          setLocalLoading(true);
+          try {
+            await onSubmit({ input, mediaUrl: localMediaUrl });
+          } finally {
+            setLocalLoading(false);
+            setInput('');
+          }
         }}
         ref={formRef}
-        className="h-full"
+        className="h-full mt-4"
       >
         {/* <div className="border-gray-500 flex overflow-hidden size-full flex flex-row items-center"> */}
         <Textarea
@@ -101,78 +139,29 @@ export function Composer({
           onKeyDown={onKeyDown}
           rows={1}
           value={input}
-          disabled={isLoading}
+          disabled={finalLoading}
           onChange={e => setInput(e.target.value)}
-          placeholder={isLoading ? '🤖 ✨ ...' : 'Message Vision Agent'}
+          placeholder={
+            finalLoading ? '🤖 Agent working ✨' : 'Message Vision Agent'
+          }
           spellCheck={false}
-          className="w-full grow resize-none bg-transparent focus-within:outline-none text-sm"
+          className="w-full grow resize-none bg-transparent focus-within:outline-none"
         />
-        {/* Stop / Regenerate Icon */}
-        {/* <div className="absolute bottom-14 right-4">
-              {isLoading ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="bg-background"
-                      onClick={() => stop()}
-                    >
-                      <IconStop />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Stop generating</TooltipContent>
-                </Tooltip>
-              ) : (
-                messages?.length >= 2 && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="bg-background"
-                        onClick={() => reload()}
-                      >
-                        <IconRefresh />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>Regenerate response</TooltipContent>
-                  </Tooltip>
-                )
-              )}
-            </div> */}
-        {/* </div> */}
         {/* Submit Icon */}
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
               type="submit"
               size="icon"
-              className="size-6 absolute bottom-3 right-3"
-              disabled={isLoading || input === ''}
+              className={cn('size-6 absolute bottom-3 right-3')}
+              disabled={finalLoading || input === '' || noMediaValidation}
             >
-              <IconArrowElbow className="size-3" />
+              <IconArrowUp className="size-3" />
             </Button>
           </TooltipTrigger>
-          <TooltipContent>Send message</TooltipContent>
+          <TooltipContent>Message Vision Agent</TooltipContent>
         </Tooltip>
       </form>
-      {/* Scroll to bottom Icon */}
-      {/* <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            size="icon"
-            className={cn(
-              'absolute top-1 right-3 transition-opacity duration-300 size-6',
-              isAtBottom ? 'opacity-0' : 'opacity-100',
-            )}
-            onClick={() => scrollToBottom()}
-          >
-            <IconArrowDown className="size-3" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Scroll to bottom</TooltipContent>
-      </Tooltip> */}
     </div>
   );
 }

components/ui/Chip.tsx

@@ -17,7 +17,7 @@ const Chip: React.FC<ChipProps> = ({
   return (
     <div
       className={cn(
-        'inline-flex items-center rounded-full text-xs mr-2 bg-gray-100 text-gray-500 px-2 py-0.5',
+        'inline-flex items-center rounded-full text-xs mr-2 bg-gray-100 text-gray-500 px-2 py-1',
         `bg-${color}-100 text-${color}-500`,
         className,
       )}

components/ui/Icons.tsx

@@ -128,6 +128,25 @@ function IconSeparator({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
+function IconArrowUp({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
 function IconArrowDown({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -519,15 +538,15 @@ function IconImage({ className, ...props }: React.ComponentProps<'svg'>) {
     <svg
       data-testid="geist-icon"
       height="16"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
       className={cn('size-4', className)}
       {...props}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M14.5 2.5H1.5V9.18933L2.96966 7.71967L3.18933 7.5H3.49999H6.63001H6.93933L6.96966 7.46967L10.4697 3.96967L11.5303 3.96967L14.5 6.93934V2.5ZM8.00066 8.55999L9.53034 10.0897L10.0607 10.62L9.00001 11.6807L8.46968 11.1503L6.31935 9H3.81065L1.53032 11.2803L1.5 11.3106V12.5C1.5 13.0523 1.94772 13.5 2.5 13.5H13.5C14.0523 13.5 14.5 13.0523 14.5 12.5V9.06066L11 5.56066L8.03032 8.53033L8.00066 8.55999ZM4.05312e-06 10.8107V12.5C4.05312e-06 13.8807 1.11929 15 2.5 15H13.5C14.8807 15 16 13.8807 16 12.5V9.56066L16.5607 9L16.0303 8.46967L16 8.43934V2.5V1H14.5H1.5H4.05312e-06V2.5V10.6893L-0.0606689 10.75L4.05312e-06 10.8107Z"
         fill="currentColor"
       ></path>
@@ -542,6 +561,7 @@ export {
   IconSeparator,
   IconArrowDown,
   IconArrowRight,
+  IconArrowUp,
   IconUser,
   IconPlus,
   IconArrowElbow,

components/ui/Tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md bg-muted px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 overflow-hidden rounded-md bg-muted px-3 py-1.5 text-xs text-primary animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className,
     )}
     {...props}

lib/db/functions.ts

@@ -150,7 +150,7 @@ export async function dbPostCreateMessage(chatId: string, message: MessageRaw) {
       }
     : {};
 
-  return prisma.message.create({
+  await prisma.message.create({
     data: {
       content: message.content,
       role: message.role,
@@ -160,6 +160,8 @@ export async function dbPostCreateMessage(chatId: string, message: MessageRaw) {
       ...userConnect,
     },
   });
+
+  revalidatePath('/chat');
 }
 
 export async function dbDeleteChat(chatId: string) {

lib/hooks/useImageUpload.ts

@@ -1,38 +0,0 @@
-import { DropzoneOptions, useDropzone } from 'react-dropzone';
-// import { toast } from 'react-hot-toast';
-
-const useImageUpload = (
-  options?: Partial<DropzoneOptions>,
-  onDrop?: (files: File[]) => void,
-) => {
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: {
-      'image/*': ['.jpeg', '.png'],
-      'video/mp4': ['.mp4', '.MP4'],
-    },
-    multiple: false,
-    onDrop: onDrop
-      ? onDrop
-      : acceptedFiles => {
-          // if (acceptedFiles.length > 10) {
-          // 	toast('You can only upload 10 images max.', {
-          // 		icon: '⚠️',
-          // 	});
-          // }
-          acceptedFiles.forEach(file => {
-            try {
-              const reader = new FileReader();
-              reader.onloadend = () => {};
-              reader.readAsDataURL(file);
-            } catch (err) {
-              console.error(err);
-            }
-          });
-        },
-    ...options,
-  });
-
-  return { getRootProps, getInputProps, isDragActive };
-};
-
-export default useImageUpload;

components/chat/ImageSelector.tsx → lib/hooks/useMediaUpload.ts

@@ -1,28 +1,17 @@
-'use client';
-
-import React, { useCallback, useState } from 'react';
-import useImageUpload from '../../lib/hooks/useImageUpload';
-import { cn, fetcher } from '@/lib/utils';
-import { SignedPayload, MessageBase } from '@/lib/types';
-import { useRouter } from 'next/navigation';
-import Loading from '../ui/Loading';
-import toast from 'react-hot-toast';
 import {
   generateVideoThumbnails,
   getVideoDurationFromVideoFile,
 } from '@rajesh896/video-thumbnails-generator';
-import { ChatWithMessages } from '@/lib/db/types';
-import { dbPostCreateChat } from '@/lib/db/functions';
-
-export interface ImageSelectorProps {}
-
-type Example = {
-  url: string;
-  initMessages: MessageBase[];
-};
+import { useCallback, useState } from 'react';
+import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import { toast } from 'react-hot-toast';
+import { fetcher } from '../utils';
+import { SignedPayload } from '../types';
 
-const ImageSelector: React.FC<ImageSelectorProps> = () => {
-  const router = useRouter();
+const useMediaUpload = (
+  onUpload: (uploadUrl: string) => void,
+  options?: Partial<DropzoneOptions>,
+) => {
   const [isUploading, setUploading] = useState(false);
 
   const upload = useCallback(async (file: File, chatId?: string) => {
@@ -57,10 +46,15 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
     };
   }, []);
 
-  const { getRootProps, getInputProps, isDragActive } = useImageUpload(
-    undefined,
-    async files => {
-      const formData = new FormData();
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    accept: {
+      'image/*': ['.jpeg', '.png'],
+      'video/mp4': ['.mp4', '.MP4'],
+    },
+    noClick: true,
+    noKeyboard: true,
+    multiple: false,
+    onDrop: async files => {
       if (files.length !== 1) {
         throw new Error('Only one image can be uploaded at a time');
       }
@@ -100,33 +94,20 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
               return upload(thumbnailFile, resp.id);
             });
         }
-        await dbPostCreateChat({
-          id: resp.id,
-          mediaUrl: resp.publicUrl,
-        });
+        onUpload(resp.publicUrl);
         setUploading(false);
-        router.push(`/chat/${resp.id}`);
       };
     },
-  );
-  return (
-    <div
-      {...getRootProps()}
-      className={cn(
-        'dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer',
-        isDragActive && 'bg-gray-500/50 border-solid',
-      )}
-    >
-      <input {...getInputProps()} />
-      <div className="text-gray-400 text-md">
-        {isUploading ? (
-          <Loading />
-        ) : (
-          'Start using Vision Agent by selecting an image'
-        )}
-      </div>
-    </div>
-  );
+    ...options,
+  });
+
+  return {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isUploading,
+    openUpload: open,
+  };
 };
 
-export default ImageSelector;
+export default useMediaUpload;

lib/hooks/useScrollAnchor.tsx

@@ -9,8 +9,8 @@ export const useScrollAnchor = () => {
   const [isVisible, setIsVisible] = useState(false);
 
   const scrollToBottom = useCallback(() => {
-    if (messagesRef.current) {
-      messagesRef.current.scrollIntoView({
+    if (visibilityRef.current) {
+      visibilityRef.current.scrollIntoView({
         block: 'end',
         behavior: 'smooth',
       });
@@ -72,7 +72,7 @@ export const useScrollAnchor = () => {
           });
         },
         {
-          rootMargin: '0px 0px -150px 0px',
+          rootMargin: '0px 0px -108px 0px',
         },
       );
 
@@ -89,6 +89,6 @@ export const useScrollAnchor = () => {
     scrollRef,
     visibilityRef,
     scrollToBottom,
-    isAtBottom: isVisible,
+    isVisible,
   };
 };

lib/hooks/useVisionAgent.ts

@@ -53,21 +53,16 @@ const uploadBase64 = async (
 
 const useVisionAgent = (chat: ChatWithMessages) => {
   const { messages: initialMessages, id, mediaUrl } = chat;
-  const searchParams = useSearchParams();
-  const reflectionValue = searchParams.get('reflection');
 
   const {
     messages,
     append: appendRaw,
-    reload,
-    stop,
     isLoading,
-    input,
-    setInput,
-    setMessages,
-    error,
+    reload,
   } = useChat({
     api: '/api/vision-agent',
+    // @ts-ignore https://sdk.vercel.ai/docs/troubleshooting/common-issues/use-chat-failed-to-parse-stream
+    streamMode: 'text',
     onResponse(response) {
       if (response.status !== 200) {
         toast.error(response.statusText);
@@ -83,22 +78,14 @@ const useVisionAgent = (chat: ChatWithMessages) => {
     body: {
       mediaUrl,
       id,
-      enableSelfReflection: reflectionValue === 'true',
     },
   });
 
   /**
-   * If the last message is from the user, reload the chat, this would trigger to get the response from the assistant
-   * There are 2 scenarios when this might happen
-   * 1. Navigated from example images, init message only include preset user message
-   * 2. Last time the assistant message failed or not saved to database.
+   * If case this is first time user navigated with init message, we need to reload the chat for the first response
    */
   useEffect(() => {
-    if (
-      !isLoading &&
-      messages.length &&
-      messages[messages.length - 1].role === 'user'
-    ) {
+    if (!isLoading && messages.length === 1 && messages[0].role === 'user') {
       reload();
     }
   }, [isLoading, messages, reload]);
@@ -115,10 +102,7 @@ const useVisionAgent = (chat: ChatWithMessages) => {
     messages: messages as MessageBase[],
     append,
     reload,
-    stop,
     isLoading,
-    input,
-    setInput,
   };
 };
 

package.json

@@ -28,7 +28,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@rajesh896/video-thumbnails-generator": "^2.3.9",
     "@vercel/kv": "^1.0.1",
-    "ai": "^2.2.31",
+    "ai": "^3.1.12",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",

pnpm-lock.yaml

@@ -51,8 +51,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       ai:
-        specifier: ^2.2.31
-        version: 2.2.37([email protected])([email protected])([email protected])([email protected]([email protected]))
+        specifier: ^3.1.12
+        version: 3.1.22([email protected])([email protected])([email protected])([email protected])([email protected]([email protected]))([email protected])
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -214,6 +214,19 @@ packages:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
 
+  '@ai-sdk/[email protected]':
+    resolution: {integrity: sha512-JRDrqL2FGDmLh+a4R5qbS8UrWN9Lt7DpDIY1x6owgXjXkz3Umm1czs1X32VlL0M1dpoSxu4hGBFtXd56+kDzXA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+    peerDependenciesMeta:
+      zod:
+        optional: true
+
+  '@ai-sdk/[email protected]':
+    resolution: {integrity: sha512-+gcMvyPUDfDXV9caN3CG5Le0M5K4CjqTdMV1ODg/AosApQiJW9ByN5imJPdI043zVdt+HS9WG+s0j4am7ca4bg==}
+    engines: {node: '>=18'}
+
   '@alloc/[email protected]':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -1309,6 +1322,9 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
+
   '@types/[email protected]':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -1463,15 +1479,19 @@ packages:
     resolution: {integrity: sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==}
     engines: {node: '>= 8.0.0'}
 
-  ai@2.2.37:
-    resolution: {integrity: sha512-JIYm5N1muGVqBqWnvkt29FmXhESoO5TcDxw74OE41SsM+uIou6NPDDs0XWb/ABcd1gmp6k5zym64KWMPM2xm0A==}
-    engines: {node: '>=14.6'}
+  ai@3.1.22:
+    resolution: {integrity: sha512-Vgy490Q6p6pZ39VrRzL9ovr2N1YPsR+KvWNs+n73VAQoGBZtU/vwiiWrFU9LHXGhB9X+EBfQD0vixnTDS2dJWA==}
+    engines: {node: '>=18'}
     peerDependencies:
-      react: ^18.2.0
+      openai: ^4.42.0
+      react: ^18 || ^19
       solid-js: ^1.7.7
       svelte: ^3.0.0 || ^4.0.0
       vue: ^3.3.4
+      zod: ^3.0.0
     peerDependenciesMeta:
+      openai:
+        optional: true
       react:
         optional: true
       solid-js:
@@ -1480,6 +1500,8 @@ packages:
         optional: true
       vue:
         optional: true
+      zod:
+        optional: true
 
   [email protected]:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -1661,6 +1683,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  [email protected]:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   [email protected]:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
 
@@ -1837,6 +1863,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+
   [email protected]:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -2049,8 +2078,8 @@ packages:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
-  eventsource-parser@1.0.0:
-    resolution: {integrity: sha512-9jgfSCa3dmEme2ES3mPByGXfgZ87VbP97tng1G2nWwWx6bV2nYxm2AWCrbQjXToSe+yYlqaZNtxffR9IeQr95g==}
+  eventsource-parser@1.1.2:
+    resolution: {integrity: sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==}
     engines: {node: '>=14.18'}
 
   [email protected]:
@@ -2524,6 +2553,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
   [email protected]:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -2531,6 +2563,11 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -3357,6 +3394,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+
   [email protected]:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3837,6 +3877,14 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  [email protected]:
+    resolution: {integrity: sha512-+akaPo6a0zpVCCseDed504KBJUQpEW5QZw7RMneNmKw+fGaML1Z9tUNLnHHAC8x6dzVRO1eB2oEMyZRnuBZg7Q==}
+    peerDependencies:
+      zod: ^3.22.4
+
+  [email protected]:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+
   [email protected]:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -3844,6 +3892,19 @@ snapshots:
 
   '@aashutoshrathi/[email protected]': {}
 
+  '@ai-sdk/[email protected]([email protected])':
+    dependencies:
+      '@ai-sdk/provider': 0.0.8
+      eventsource-parser: 1.1.2
+      nanoid: 3.3.6
+      secure-json-parse: 2.7.0
+    optionalDependencies:
+      zod: 3.23.8
+
+  '@ai-sdk/[email protected]':
+    dependencies:
+      json-schema: 0.4.0
+
   '@alloc/[email protected]': {}
 
   '@ampproject/[email protected]':
@@ -5454,6 +5515,8 @@ snapshots:
     dependencies:
       '@types/ms': 0.7.34
 
+  '@types/[email protected]': {}
+
   '@types/[email protected]': {}
 
   '@types/[email protected]':
@@ -5643,20 +5706,28 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
-  ai@2.2.37([email protected])([email protected])([email protected])([email protected]([email protected])):
+  ai@3.1.22([email protected])([email protected])([email protected])([email protected])([email protected]([email protected]))([email protected]):
     dependencies:
-      eventsource-parser: 1.0.0
+      '@ai-sdk/provider': 0.0.8
+      '@ai-sdk/provider-utils': 0.0.11([email protected])
+      eventsource-parser: 1.1.2
+      json-schema: 0.4.0
+      jsondiffpatch: 0.6.0
       nanoid: 3.3.6
+      secure-json-parse: 2.7.0
       solid-swr-store: 0.10.7([email protected])([email protected])
       sswr: 2.0.0([email protected])
       swr: 2.2.0([email protected])
       swr-store: 0.10.6
       swrv: 1.0.4([email protected]([email protected]))
+      zod-to-json-schema: 3.22.5([email protected])
     optionalDependencies:
+      openai: 4.38.1
       react: 18.2.0
       solid-js: 1.8.16
       svelte: 4.2.15
       vue: 3.4.23([email protected])
+      zod: 3.23.8
 
   [email protected]:
     dependencies:
@@ -5872,6 +5943,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -6033,6 +6106,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -6381,7 +6456,7 @@ snapshots:
 
   [email protected]: {}
 
-  eventsource-parser@1.0.0: {}
+  eventsource-parser@1.1.2: {}
 
   [email protected]: {}
 
@@ -6888,12 +6963,20 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
     dependencies:
       minimist: 1.2.8
 
+  [email protected]:
+    dependencies:
+      '@types/diff-match-patch': 1.0.36
+      chalk: 5.3.0
+      diff-match-patch: 1.0.5
+
   [email protected]:
     dependencies:
       array-includes: 3.1.8
@@ -7930,6 +8013,8 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -8517,4 +8602,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]):
+    dependencies:
+      zod: 3.23.8
+
+  [email protected]: {}
+
   [email protected]: {}

tailwind.config.ts

@@ -1,80 +1,89 @@
-import type { Config } from "tailwindcss"
+import type { Config } from 'tailwindcss';
 
 const config = {
-  darkMode: ["class"],
+  darkMode: ['class'],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
-	],
-  prefix: "",
+  ],
+  prefix: '',
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
+        progress: {
+          '0%': { transform: ' translateX(0) scaleX(0)' },
+          '40%': { transform: 'translateX(0) scaleX(0.4)' },
+          '100%': { transform: 'translateX(100%) scaleX(0.5)' },
+        },
+      },
+      transformOrigin: {
+        'left-right': '0% 50%',
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        progress: 'progress 1s infinite linear',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-} satisfies Config
+  plugins: [require('tailwindcss-animate')],
+} satisfies Config;
 
-export default config
+export default config;