feat: Composer refactor and layout scroll (#62)


app/layout.tsx

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

components/chat/ChatClient.tsx

@@ -1,20 +1,19 @@
 'use client';
 
-import { ChatList } from '@/components/chat/ChatList';
+// import { ChatList } from '@/components/chat/ChatList';
 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 { ChatWithMessages } from '@/lib/db/types';
+import { ChatMessage } from './ChatMessage';
 
-export interface ChatProps extends React.ComponentProps<'div'> {
+export interface ChatClientProps {
   chat: ChatWithMessages;
-  isAdminView?: boolean;
-  session: Session | null;
 }
 
-export function Chat({ chat, session, isAdminView }: ChatProps) {
+const ChatClient: React.FC<ChatClientProps> = ({ chat }) => {
   const { mediaUrl, id } = chat;
   const { messages, append, reload, stop, isLoading, input, setInput } =
     useVisionAgent(chat);
@@ -23,34 +22,37 @@ export function Chat({ chat, session, isAdminView }: ChatProps) {
     useScrollAnchor();
 
   return (
-    <>
-      <div className="h-full overflow-auto relative" ref={scrollRef}>
-        <div className="pb-[200px] pt-6" ref={messagesRef}>
-          <ChatList
-            messages={messages}
-            session={session}
-            isLoading={isLoading}
-          />
-          <div className="h-px w-full" ref={visibilityRef} />
-        </div>
+    <div
+      className="h-full my-8 overflow-auto mx-auto max-w-5xl border rounded-lg relative"
+      ref={scrollRef}
+    >
+      <div className="overflow-auto h-full pt-6 px-6" ref={messagesRef}>
+        {messages
+          // .filter(message => message.role !== 'system')
+          .map((message, index) => (
+            <ChatMessage
+              key={index}
+              message={message}
+              isLoading={isLoading && index === messages.length - 1}
+            />
+          ))}
+        <div className="h-px w-full" ref={visibilityRef} />
       </div>
-      {!isAdminView && (
-        <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] h-[178px]">
-          <Composer
-            id={id}
-            url={mediaUrl}
-            isLoading={isLoading}
-            stop={stop}
-            append={append}
-            reload={reload}
-            messages={messages}
-            input={input}
-            setInput={setInput}
-            isAtBottom={isAtBottom}
-            scrollToBottom={scrollToBottom}
-          />
-        </div>
-      )}
-    </>
+      <div className="sticky bottom-3 w-full">
+        <Composer
+          id={id}
+          mediaUrl={mediaUrl}
+          isLoading={isLoading}
+          stop={stop}
+          append={append}
+          reload={reload}
+          messages={messages}
+          input={input}
+          setInput={setInput}
+        />
+      </div>
+    </div>
   );
-}
+};
+
+export default ChatClient;

components/chat/ChatServer.tsx

@@ -1,4 +1,4 @@
-import { Chat } from './ChatClient';
+import ChatClient from './ChatClient';
 import { auth } from '@/auth';
 import { dbGetChat } from '@/lib/db/functions';
 import { redirect } from 'next/navigation';
@@ -15,6 +15,5 @@ export default async function ChatServer({ id }: ChatServerProps) {
     revalidatePath('/');
     redirect('/');
   }
-  const session = await auth();
-  return <Chat chat={chat} session={session} />;
+  return <ChatClient chat={chat} />;
 }

components/chat/Composer.tsx

@@ -16,12 +16,14 @@ import {
 import {
   IconArrowDown,
   IconArrowElbow,
+  IconImage,
   IconRefresh,
   IconStop,
 } from '@/components/ui/Icons';
 import { cn } from '@/lib/utils';
 import { generateInputImageMarkdown } from '@/lib/messageUtils';
 import { Switch } from '../ui/Switch';
+import Chip from '../ui/Chip';
 
 export interface ComposerProps
   extends Pick<
@@ -31,24 +33,17 @@ export interface ComposerProps
   id?: string;
   title?: string;
   messages: MessageBase[];
-  url?: string;
-  isAtBottom: boolean;
-  scrollToBottom: () => void;
+  mediaUrl?: string;
 }
 
 export function Composer({
   id,
-  title,
   isLoading,
-  stop,
   append,
-  reload,
   input,
   setInput,
-  messages,
-  isAtBottom,
-  scrollToBottom,
-  url,
+  mediaUrl,
+  // isAtBottom,
 }: ComposerProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
@@ -58,92 +53,62 @@ export function Composer({
     }
   }, []);
 
+  const mediaName = mediaUrl?.split('/').pop();
   return (
-    // <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] h-[178px]">
-    <div className="mx-auto sm:max-w-3xl sm:px-4 h-full">
-      <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4 h-full">
-        <form
-          onSubmit={async e => {
-            e.preventDefault();
-            if (!input?.trim()) {
-              return;
-            }
-            setInput('');
-            await append({
-              id,
-              content:
-                input + (url ? '\n\n' + generateInputImageMarkdown(url) : ''),
-              role: 'user',
-            });
-            scrollToBottom();
-          }}
-          ref={formRef}
-          className="h-full"
-        >
-          <div className="relative flex px-8 pl-2 overflow-hidden size-full bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2 items-start">
-            {url && (
-              <div className="w-1/5 p-2 h-full flex items-center justify-center relative">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Img
-                      src={url}
-                      className="cursor-zoom-in"
-                      alt="preview-image"
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <Img
-                      src={url}
-                      className="m-2"
-                      quality={100}
-                      width={500}
-                      alt="zoomed-in-image"
-                    />
-                  </TooltipContent>
-                </Tooltip>
+    <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>
-            )}
-            <div className="flex flex-col gap-2 w-4/5 px-4">
-              <Textarea
-                ref={inputRef}
-                tabIndex={0}
-                onKeyDown={onKeyDown}
-                rows={1}
-                value={input}
-                disabled={isLoading}
-                onChange={e => setInput(e.target.value)}
-                placeholder={
-                  isLoading
-                    ? 'Vision Agent is thinking...'
-                    : 'Ask question about the image.'
-                }
-                spellCheck={false}
-                className="min-h-[60px] resize-none bg-transparent py-[1.3em] focus-within:outline-none sm:text-sm"
-              />
-            </div>
-            {/* Scroll to bottom Icon */}
-            <div
-              className={cn(
-                'absolute top-3 right-4 transition-opacity duration-300',
-                isAtBottom ? 'opacity-0' : 'opacity-100',
-              )}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="bg-background"
-                    onClick={() => scrollToBottom()}
-                  >
-                    <IconArrowDown />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Scroll to bottom</TooltipContent>
-              </Tooltip>
-            </div>
-            {/* Stop / Regenerate Icon */}
-            <div className="absolute bottom-14 right-4">
+            </Chip>
+          </TooltipTrigger>
+          <TooltipContent sideOffset={20}>
+            <Img
+              src={mediaUrl}
+              className="m-1"
+              quality={100}
+              alt="zoomed-in-image"
+            />
+          </TooltipContent>
+        </Tooltip>
+      )}
+      <form
+        onSubmit={async e => {
+          e.preventDefault();
+          if (!input?.trim()) {
+            return;
+          }
+          setInput('');
+          await append({
+            id,
+            content:
+              input +
+              (mediaUrl ? '\n\n' + generateInputImageMarkdown(mediaUrl) : ''),
+            role: 'user',
+          });
+        }}
+        ref={formRef}
+        className="h-full"
+      >
+        {/* <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={isLoading}
+          onChange={e => setInput(e.target.value)}
+          placeholder={isLoading ? '🤖 ✨ ...' : 'Message Vision Agent'}
+          spellCheck={false}
+          className="grow resize-none bg-transparent focus-within:outline-none text-sm"
+        />
+        {/* Stop / Regenerate Icon */}
+        {/* <div className="absolute bottom-14 right-4">
               {isLoading ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -175,26 +140,39 @@ export function Composer({
                   </Tooltip>
                 )
               )}
-            </div>
-            {/* Submit Icon */}
-            <div className="absolute bottom-3 right-4">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="submit"
-                    size="icon"
-                    disabled={isLoading || input === ''}
-                  >
-                    <IconArrowElbow />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Send message</TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-        </form>
-      </div>
+            </div> */}
+        {/* </div> */}
+        {/* Submit Icon */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="submit"
+              size="icon"
+              className="size-6 absolute bottom-3 right-3"
+              disabled={isLoading || input === ''}
+            >
+              <IconArrowElbow className="size-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Send message</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>
-    // </div>
   );
 }

components/ui/Chip.tsx

@@ -1,28 +1,29 @@
 import { cn } from '@/lib/utils';
+import React from 'react';
 
-export interface ChipProps {
+type ChipProps = {
   label?: string;
-  value: string;
+  value?: string;
   color?: 'gray' | 'blue' | 'yellow' | 'purple';
   className?: string;
-}
+} & React.ComponentProps<'div'>;
 
 const Chip: React.FC<ChipProps> = ({
-  label,
   value,
   className,
   color = 'gray',
+  children,
 }) => {
   return (
     <div
       className={cn(
-        'inline-flex items-center px-1.5 rounded-full text-xs mr-2 bg-gray-100 text-gray-500',
+        'inline-flex items-center rounded-full text-xs mr-2 bg-gray-100 text-gray-500 px-2 py-0.5',
         `bg-${color}-100 text-${color}-500`,
         className,
       )}
     >
-      {label && <span className="font-medium">{label} :</span>}
       <span>{value}</span>
+      {children}
     </div>
   );
 };

components/ui/DropdownMenu.tsx

@@ -51,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}

components/ui/Icons.tsx

@@ -4,90 +4,6 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-function IconNextChat({
-  className,
-  inverted,
-  ...props
-}: React.ComponentProps<'svg'> & { inverted?: boolean }) {
-  const id = React.useId();
-
-  return (
-    <svg
-      viewBox="0 0 17 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <defs>
-        <linearGradient
-          id={`gradient-${id}-1`}
-          x1="10.6889"
-          y1="10.3556"
-          x2="13.8445"
-          y2="14.2667"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={inverted ? 'white' : 'black'} />
-          <stop
-            offset={1}
-            stopColor={inverted ? 'white' : 'black'}
-            stopOpacity={0}
-          />
-        </linearGradient>
-        <linearGradient
-          id={`gradient-${id}-2`}
-          x1="11.7555"
-          y1="4.8"
-          x2="11.7376"
-          y2="9.50002"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={inverted ? 'white' : 'black'} />
-          <stop
-            offset={1}
-            stopColor={inverted ? 'white' : 'black'}
-            stopOpacity={0}
-          />
-        </linearGradient>
-      </defs>
-      <path
-        d="M1 16L2.58314 11.2506C1.83084 9.74642 1.63835 8.02363 2.04013 6.39052C2.4419 4.75741 3.41171 3.32057 4.776 2.33712C6.1403 1.35367 7.81003 0.887808 9.4864 1.02289C11.1628 1.15798 12.7364 1.8852 13.9256 3.07442C15.1148 4.26363 15.842 5.83723 15.9771 7.5136C16.1122 9.18997 15.6463 10.8597 14.6629 12.224C13.6794 13.5883 12.2426 14.5581 10.6095 14.9599C8.97637 15.3616 7.25358 15.1692 5.74942 14.4169L1 16Z"
-        fill={inverted ? 'black' : 'white'}
-        stroke={inverted ? 'black' : 'white'}
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <mask
-        id="mask0_91_2047"
-        style={{ maskType: 'alpha' }}
-        maskUnits="userSpaceOnUse"
-        x={1}
-        y={0}
-        width={16}
-        height={16}
-      >
-        <circle cx={9} cy={8} r={8} fill={inverted ? 'black' : 'white'} />
-      </mask>
-      <g mask="url(#mask0_91_2047)">
-        <circle cx={9} cy={8} r={8} fill={inverted ? 'black' : 'white'} />
-        <path
-          d="M14.2896 14.0018L7.146 4.8H5.80005V11.1973H6.87681V6.16743L13.4444 14.6529C13.7407 14.4545 14.0231 14.2369 14.2896 14.0018Z"
-          fill={`url(#gradient-${id}-1)`}
-        />
-        <rect
-          x="11.2222"
-          y="4.8"
-          width="1.06667"
-          height="6.4"
-          fill={`url(#gradient-${id}-2)`}
-        />
-      </g>
-    </svg>
-  );
-}
-
 function IconLandingAI({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -146,23 +62,6 @@ function IconLandingAI({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
-function IconVercel({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      aria-label="Vercel logomark"
-      role="img"
-      viewBox="0 0 74 64"
-      className={cn('size-4', className)}
-      {...props}
-    >
-      <path
-        d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
-        fill="currentColor"
-      ></path>
-    </svg>
-  );
-}
-
 function IconGitHub({ className, ...props }: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -615,11 +514,30 @@ function IconExclamationTriangle({
   );
 }
 
+function IconImage({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      className={cn('size-4', className)}
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="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>
+    </svg>
+  );
+}
+
 export {
   IconEdit,
-  IconNextChat,
   IconLandingAI,
-  IconVercel,
   IconGitHub,
   IconSeparator,
   IconArrowDown,
@@ -647,4 +565,5 @@ export {
   IconLoading,
   IconDiscord,
   IconExclamationTriangle,
+  IconImage,
 };

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-primary 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-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',
       className,
     )}
     {...props}