feat: Examples + Beta logo (#65)


app/chat/page.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import { generateInputImageMarkdown } from '@/lib/messageUtils';
-import { useRouter } from 'next/navigation';
-
-import { MessageRaw } from '@/lib/db/types';
-import { useState } from 'react';
-import { Composer } from '@/components/chat/Composer';
-import { dbPostCreateChat } from '@/lib/db/functions';
-import { nanoid } from '@/lib/utils';
-
-const EXAMPLE_URL =
-  'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png';
-const EXAMPLE_HEADER = 'Count and find';
-const EXAMPLE_SUBHEADER =
-  'number of flowers, area of largest and smallest flower';
-const EXAMPLE_PROMPT =
-  'Count the number of flowers and find the area of the largest and smallest flower';
-
-const exampleMessages = [
-  {
-    heading: EXAMPLE_HEADER,
-    subheading: EXAMPLE_SUBHEADER,
-    url: EXAMPLE_URL,
-    initMessages: [
-      {
-        role: 'user' as MessageRaw['role'],
-        content:
-          EXAMPLE_PROMPT + '\n\n' + generateInputImageMarkdown(EXAMPLE_URL),
-      },
-    ],
-  },
-  // {
-  //   heading: 'Detecting',
-  //   url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
-  //   subheading: 'number of cereals in an image',
-  //   message: `How many cereals are there in the image?`,
-  // },
-];
-
-export default function Page() {
-  const router = useRouter();
-  return (
-    <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/globals.css

@@ -103,3 +103,16 @@ th {
 table img {
   background-color: transparent;
 }
+
+h1 {
+  font-size: 3.75rem; /* 48px */
+  font-family: var(--font-geist-sans);
+  font-weight: bold;
+  letter-spacing: -1px;
+}
+
+.homepage {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='800' preserveAspectRatio='none' viewBox='0 0 1440 800'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='800' x='0' y='0' fill='rgba(39%2c 39%2c 42%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c586.338C117.188%2c602.632%2c249.981%2c607.097%2c343.984%2c535.25C436.988%2c464.167%2c428.51%2c324.327%2c480.215%2c219.307C534.041%2c109.979%2c656.285%2c27.833%2c653.789%2c-94.001C651.262%2c-217.335%2c542.961%2c-307.497%2c467.422%2c-405.024C387.438%2c-508.29%2c329.741%2c-667.611%2c199.733%2c-680.229C64.395%2c-693.364%2c-10.885%2c-516.553%2c-136.125%2c-463.601C-240.173%2c-419.609%2c-369.118%2c-464.571%2c-462.091%2c-400.404C-565.056%2c-329.341%2c-652.036%2c-220.136%2c-668.569%2c-96.126C-685.064%2c27.595%2c-620.538%2c148.465%2c-548.895%2c250.672C-485.01%2c341.811%2c-382.503%2c389.373%2c-287.551%2c447.439C-194.861%2c504.122%2c-107.613%2c571.375%2c0%2c586.338' fill='%23212124'%3e%3c/path%3e%3cpath d='M1440 1336.819C1541.131 1345.339 1640.5529999999999 1299.223 1721.426 1237.907 1798.82 1179.229 1854.8220000000001 1095.077 1881.876 1001.798 1906.8519999999999 915.683 1873.705 828.071 1866.208 738.721 1858.141 642.578 1889.666 537.0129999999999 1836.144 456.739 1781.231 374.378 1680.9279999999999 326.709 1582.8029999999999 313.659 1490.378 301.367 1407.661 359.059 1319.016 387.966 1233.469 415.863 1131.429 413.58 1071.248 480.474 1010.852 547.608 1027.055 649.928 1004.646 737.406 978.896 837.926 891.045 936.749 929.698 1033.047 968.1410000000001 1128.8229999999999 1098.805 1140.133 1187.4850000000001 1192.922 1272.452 1243.501 1341.467 1328.517 1440 1336.819' fill='%232d2d30'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='800' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
+  background-size: cover;
+  background: linear-gradient(to bottom, rgb(9, 9, 11), rgb(32, 32, 39));
+}

app/page.tsx

@@ -1,12 +1,90 @@
-import { auth } from '@/auth';
-import { redirect } from 'next/navigation';
+'use client';
 
-export default async function Page() {
-  redirect('/chat');
+import { generateInputImageMarkdown } from '@/lib/messageUtils';
+import { useRouter } from 'next/navigation';
 
-  // return (
-  // 	<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10 space-y-2">
-  // 		Welcome to Insight Playground
-  // 	</div>
-  // );
+import { MessageRaw } from '@/lib/db/types';
+import { useRef, useState } from 'react';
+import Composer, { ComposerRef } from '@/components/chat/Composer';
+import { dbPostCreateChat } from '@/lib/db/functions';
+import { nanoid } from '@/lib/utils';
+import Chip from '@/components/ui/Chip';
+import { IconArrowUpRight, IconImage } from '@/components/ui/Icons';
+
+const EXAMPLES = [
+  {
+    title: 'Counting flowers',
+    mediaUrl:
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
+    prompt: 'Count the number of flowers in this image.',
+  },
+  // {
+  //   heading: 'Detecting',
+  //   url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
+  //   subheading: 'number of cereals in an image',
+  //   message: `How many cereals are there in the image?`,
+  // },
+];
+
+export default function Page() {
+  const router = useRouter();
+  const composerRef = useRef<ComposerRef>(null);
+  return (
+    <div className="h-screen w-screen homepage">
+      <div className="mx-auto w-[42rem] max-w-full px-4 mt-[200px]">
+        <h1 className="mb-4 text-center relative">
+          Vision Agent
+          <Chip className="absolute bg-green-100 text-green-500">BETA</Chip>
+        </h1>
+        <h4 className="text-center">
+          Generate code to solve your vision problem with simple prompts.
+        </h4>
+        <div className="my-8">
+          <Composer
+            ref={composerRef}
+            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>
+        <>
+          {EXAMPLES.map((example, index) => {
+            return (
+              <Chip
+                key={index}
+                className="bg-transparent border border-zinc-500 cursor-pointer px-4"
+                onClick={() => {
+                  composerRef.current?.setInput(example.prompt);
+                  composerRef.current?.setMediaUrl(example.mediaUrl);
+                }}
+              >
+                <div className="flex flex-row items-center space-x-2">
+                  <p className="text-primary text-sm">{example.title}</p>
+                  <IconArrowUpRight className="text-primary" />
+                </div>
+              </Chip>
+            );
+          })}
+        </>
+      </div>
+    </div>
+  );
 }

components/ChatSelect.tsx

@@ -52,7 +52,7 @@ const ChatSelect: React.FC<{ myChats: Chat[] }> = ({ myChats }) => {
     <Select
       defaultValue={currentChat?.id}
       value={currentChat?.id}
-      onValueChange={id => router.push(`/chat${id === 'new' ? '' : '/' + id}`)}
+      onValueChange={id => router.push(id === 'new' ? '/' : `/chat/${id}`)}
     >
       <SelectTrigger className="w-[240px]">
         {currentChat?.title ?? 'Select a conversation'}

components/Header.tsx

@@ -27,7 +27,7 @@ export async function Header() {
     return (
       <header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
         <Button variant="link" asChild className="mr-2">
-          <Link href="/chat">New conversation</Link>
+          <Link href="/">New conversation</Link>
         </Button>
       </header>
     );
@@ -68,7 +68,7 @@ export async function Header() {
         </Button>
       )} */}
       <Button variant="link" asChild className="mr-2">
-        <Link href="/chat">New conversation</Link>
+        <Link href="/">New conversation</Link>
       </Button>
       <Tooltip>
         <TooltipTrigger asChild>

components/chat/ChatClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 // import { ChatList } from '@/components/chat/ChatList';
-import { Composer } from '@/components/chat/Composer';
+import Composer from '@/components/chat/Composer';
 import useVisionAgent from '@/lib/hooks/useVisionAgent';
 import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
 import { Session } from 'next-auth';
@@ -17,12 +17,14 @@ export interface ChatClientProps {
   chat: ChatWithMessages;
 }
 
+export const SCROLL_BOTTOM = 120;
+
 const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
   const { mediaUrl, id } = chat;
   const { messages, append, isLoading, reload } = useVisionAgent(chat);
 
   const { messagesRef, scrollRef, visibilityRef, isVisible, scrollToBottom } =
-    useScrollAnchor();
+    useScrollAnchor(SCROLL_BOTTOM);
 
   // Scroll to bottom when messages are loading
   useEffect(() => {
@@ -46,12 +48,15 @@ const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
               isLoading={isLoading && index === messages.length - 1}
             />
           ))}
-        <div className="h-[108px] w-full" ref={visibilityRef} />
+        <div
+          className="w-full"
+          style={{ height: SCROLL_BOTTOM }}
+          ref={visibilityRef}
+        />
       </div>
-      <div className="absolute bottom-3 w-full">
+      <div className="absolute bottom-4 w-full">
         <Composer
-          id={id}
-          mediaUrl={mediaUrl}
+          initMediaUrl={mediaUrl}
           isLoading={isLoading}
           onSubmit={async ({ input, mediaUrl: newMediaUrl }) => {
             append({

components/chat/Composer.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 
 import { Button } from '@/components/ui/Button';
 import { useEnterSubmit } from '@/lib/hooks/useEnterSubmit';
@@ -10,17 +16,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import {
-  IconArrowElbow,
-  IconImage,
-  IconArrowUp,
-  IconRefresh,
-  IconStop,
-  IconClose,
-} from '@/components/ui/Icons';
+import { IconImage, IconArrowUp, 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';
@@ -28,140 +25,164 @@ import useMediaUpload from '@/lib/hooks/useMediaUpload';
 export interface ComposerProps {
   onSubmit: (params: { input: string; mediaUrl: string }) => Promise<void>;
   isLoading?: boolean;
-  id?: string;
   title?: string;
-  mediaUrl?: string;
+  initMediaUrl?: string;
+  initInput?: string;
+}
+
+export interface ComposerRef {
+  setMediaUrl: (url: string) => void;
+  setInput: (input: string) => void;
 }
 
-export function Composer({ id, isLoading, onSubmit, mediaUrl }: ComposerProps) {
-  const { formRef, onKeyDown } = useEnterSubmit();
-  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 Composer = forwardRef<ComposerRef, ComposerProps>(
+  ({ isLoading, onSubmit, initMediaUrl, initInput }, ref) => {
+    const { formRef, onKeyDown } = useEnterSubmit();
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    const [localMediaUrl, setLocalMediaUrl] = useState<string | undefined>(
+      initMediaUrl,
+    );
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+    const [input, setLocalInput] = useState(initInput ?? '');
+    const noMediaValidation = !localMediaUrl && !!input;
+    const {
+      getRootProps,
+      getInputProps,
+      isDragActive,
+      isUploading,
+      openUpload,
+    } = useMediaUpload(uploadUrl => setLocalMediaUrl(uploadUrl));
 
-  const finalLoading = isLoading || isUploading || localLoading;
+    const finalLoading = isLoading || isUploading || isSubmitting;
 
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, []);
 
-  const mediaName = localMediaUrl?.split('/').pop();
-  return (
-    <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()} />
+    useImperativeHandle(ref, () => ({
+      setMediaUrl(mediaUrl) {
+        setLocalMediaUrl(mediaUrl);
+      },
+      setInput(input) {
+        setLocalInput(input);
+      },
+    }));
+
+    const mediaName = localMediaUrl?.split('/').pop();
+    return (
       <div
+        {...getRootProps()}
         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',
+          'w-full mx-auto max-w-2xl px-6 py-4 bg-zinc-600 rounded-xl relative shadow-lg shadow-zinc-600/40',
+          isDragActive && 'bg-indigo-700/50',
         )}
       >
-        <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"
+        <input {...getInputProps()} />
+        <div
           className={cn(
-            'ml-[-10px] border-2 border-transparent',
-            noMediaValidation && 'border-red-500/50 border-2 text-red-500',
+            'w-1/3 h-1 rounded-full overflow-hidden bg-zinc-700 absolute left-1/2 -translate-x-1/2 top-2',
+            finalLoading ? 'opacity-100' : 'opacity-0',
           )}
-          onClick={openUpload}
         >
-          <IconImage className="mr-2 size-4" />
-          {noMediaValidation ? 'Select media (required)' : 'Select media'}
-        </Button>
-      )}
-      <form
-        onSubmit={async e => {
-          e.preventDefault();
-          if (!input?.trim() || !localMediaUrl) {
-            return;
-          }
-          setLocalLoading(true);
-          try {
-            await onSubmit({ input, mediaUrl: localMediaUrl });
-          } finally {
-            setLocalLoading(false);
-            setInput('');
-          }
-        }}
-        ref={formRef}
-        className="h-full mt-4"
-      >
-        {/* <div className="border-gray-500 flex overflow-hidden size-full flex flex-row items-center"> */}
-        <Textarea
-          ref={inputRef}
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          rows={1}
-          value={input}
-          disabled={finalLoading}
-          onChange={e => setInput(e.target.value)}
-          placeholder={
-            finalLoading ? '🤖 Agent working ✨' : 'Message Vision Agent'
-          }
-          spellCheck={false}
-          className="w-full grow resize-none bg-transparent focus-within:outline-none"
-        />
-        {/* Submit Icon */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="submit"
-              size="icon"
-              className={cn('size-6 absolute bottom-3 right-3')}
-              disabled={finalLoading || input === '' || noMediaValidation}
-            >
-              <IconArrowUp className="size-3" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Message Vision Agent</TooltipContent>
-        </Tooltip>
-      </form>
-    </div>
-  );
-}
+          <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={12}>
+                  <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 border-transparent',
+              noMediaValidation && 'border-red-500/50 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() || !localMediaUrl) {
+              return;
+            }
+            setIsSubmitting(true);
+            try {
+              await onSubmit({ input, mediaUrl: localMediaUrl });
+            } finally {
+              setIsSubmitting(false);
+              setLocalInput('');
+            }
+          }}
+          ref={formRef}
+          className="h-full mt-4"
+        >
+          {/* <div className="border-gray-500 flex overflow-hidden size-full flex flex-row items-center"> */}
+          <Textarea
+            ref={inputRef}
+            tabIndex={0}
+            onKeyDown={onKeyDown}
+            rows={1}
+            value={input}
+            disabled={finalLoading}
+            onChange={e => setLocalInput(e.target.value)}
+            placeholder={
+              finalLoading ? '🤖 Agent working ✨' : 'Message Vision Agent'
+            }
+            spellCheck={false}
+            className="w-full grow resize-none bg-transparent focus-within:outline-none"
+          />
+          {/* Submit Icon */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="submit"
+                size="icon"
+                className={cn('size-6 absolute bottom-3 right-3')}
+                disabled={finalLoading || input === '' || noMediaValidation}
+              >
+                <IconArrowUp className="size-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Message Vision Agent</TooltipContent>
+          </Tooltip>
+        </form>
+      </div>
+    );
+  },
+);
+
+Composer.displayName = 'Composer';
+
+export default Composer;

components/project/ProjectChat.tsx

@@ -2,13 +2,6 @@
 
 import { MediaDetails } from '@/lib/fetch';
 import React, { useState } from 'react';
-import { ChatList } from '../chat/ChatList';
-import useVisionAgent from '@/lib/hooks/useVisionAgent';
-import { nanoid } from '@/lib/utils';
-import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
-import { Composer } from '../chat/Composer';
-import { useAtomValue } from 'jotai';
-import { selectedMediaIdAtom } from '@/state/media';
 
 export interface ChatProps {
   mediaList: MediaDetails[];

components/ui/Chip.tsx

@@ -4,23 +4,22 @@ import React from 'react';
 type ChipProps = {
   label?: string;
   value?: string;
-  color?: 'gray' | 'blue' | 'yellow' | 'purple';
   className?: string;
 } & React.ComponentProps<'div'>;
 
 const Chip: React.FC<ChipProps> = ({
   value,
   className,
-  color = 'gray',
   children,
+  ...props
 }) => {
   return (
     <div
       className={cn(
         '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,
       )}
+      {...props}
     >
       <span>{value}</span>
       {children}

components/ui/CodeBlock.tsx

@@ -133,7 +133,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
         codeTagProps={{
           style: {
             fontSize: '0.9rem',
-            fontFamily: 'var(--font-mono)',
+            fontFamily: 'var(--font-geist-mono)',
           },
         }}
       >

components/ui/Icons.tsx

@@ -161,6 +161,29 @@ function IconArrowDown({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
+function IconArrowUpRight({
+  className,
+  ...props
+}: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.75001 2H5.00001V3.5H5.75001H11.4393L2.21968 12.7197L1.68935 13.25L2.75001 14.3107L3.28034 13.7803L12.4988 4.56182V10.25V11H13.9988V10.25V3C13.9988 2.44772 13.5511 2 12.9988 2H5.75001Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
+
 function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -562,6 +585,7 @@ export {
   IconArrowDown,
   IconArrowRight,
   IconArrowUp,
+  IconArrowUpRight,
   IconUser,
   IconPlus,
   IconArrowElbow,

lib/hooks/useScrollAnchor.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-export const useScrollAnchor = () => {
+export const useScrollAnchor = (scrollBottom: number) => {
   const messagesRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const visibilityRef = useRef<HTMLDivElement>(null);
@@ -72,7 +72,7 @@ export const useScrollAnchor = () => {
           });
         },
         {
-          rootMargin: '0px 0px -108px 0px',
+          rootMargin: `0px 0px -${scrollBottom}px 0px`,
         },
       );
 

tailwind.config.ts

@@ -18,6 +18,10 @@ const config = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)'],
+        mono: ['var(--font-geist-mono)'],
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',