Merge branch 'vercel:main' into main

athrael-soju · Nov 6, 2024 · 703d34a · 703d34a
2 parents 8a51873 + 22a09de
commit 703d34a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/components/custom/canvas.tsx b/components/custom/canvas.tsx
@@ -429,7 +429,9 @@ export function Canvas({
                     }
                   )}`}
                 </div>
-              ) : null}
+              ) : (
+                <div className="w-32 h-3 mt-2 bg-muted-foreground/20 rounded-md animate-pulse" />
+              )}
             </div>
           </div>
 
@@ -443,6 +445,7 @@ export function Canvas({
                     copyToClipboard(canvas.content);
                     toast.success('Copied to clipboard!');
                   }}
+                  disabled={canvas.status === 'streaming'}
                 >
                   <CopyIcon size={18} />
                 </Button>
@@ -457,7 +460,9 @@ export function Canvas({
                   onClick={() => {
                     handleVersionChange('prev');
                   }}
-                  disabled={currentVersionIndex === 0}
+                  disabled={
+                    currentVersionIndex === 0 || canvas.status === 'streaming'
+                  }
                 >
                   <UndoIcon size={18} />
                 </Button>
@@ -472,7 +477,7 @@ export function Canvas({
                   onClick={() => {
                     handleVersionChange('next');
                   }}
-                  disabled={isCurrentVersion}
+                  disabled={isCurrentVersion || canvas.status === 'streaming'}
                 >
                   <RedoIcon size={18} />
                 </Button>
@@ -483,12 +488,18 @@ export function Canvas({
               <TooltipTrigger asChild>
                 <Button
                   variant="outline"
-                  className={cx('p-2 h-fit dark:hover:bg-zinc-700', {
-                    'bg-muted': mode === 'diff',
-                  })}
+                  className={cx(
+                    'p-2 h-fit !pointer-events-auto dark:hover:bg-zinc-700',
+                    {
+                      'bg-muted': mode === 'diff',
+                    }
+                  )}
                   onClick={() => {
                     handleVersionChange('toggle');
                   }}
+                  disabled={
+                    canvas.status === 'streaming' || currentVersionIndex === 0
+                  }
                 >
                   <DeltaIcon size={18} />
                 </Button>

diff --git a/components/custom/multimodal-input.tsx b/components/custom/multimodal-input.tsx
@@ -238,7 +238,7 @@ export function MultimodalInput({
       />
 
       {(attachments.length > 0 || uploadQueue.length > 0) && (
-        <div className="flex flex-row gap-2 overflow-x-scroll">
+        <div className="flex flex-row gap-2 overflow-x-scroll items-end">
           {attachments.map((attachment) => (
             <PreviewAttachment key={attachment.url} attachment={attachment} />
           ))}
@@ -263,7 +263,7 @@ export function MultimodalInput({
         value={input}
         onChange={handleInput}
         className={cx(
-          'min-h-[24px] overflow-hidden resize-none rounded-xl text-base bg-muted',
+          'min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-xl text-base bg-muted',
           className
         )}
         rows={3}

diff --git a/components/custom/preview-attachment.tsx b/components/custom/preview-attachment.tsx
@@ -12,7 +12,7 @@ export const PreviewAttachment = ({
   const { name, url, contentType } = attachment;
 
   return (
-    <div className="flex flex-col gap-2 max-w-16">
+    <div className="flex flex-col gap-2">
       <div className="w-20 aspect-video bg-muted rounded-md relative flex flex-col items-center justify-center">
         {contentType ? (
           contentType.startsWith('image') ? (

diff --git a/components/custom/use-canvas-stream.tsx b/components/custom/use-canvas-stream.tsx
@@ -56,9 +56,11 @@ export function useCanvasStream({
             ...draftCanvas,
             content: draftCanvas.content + (delta.content as string),
             isVisible:
-              draftCanvas.status === 'streaming'
+              draftCanvas.status === 'streaming' &&
+              draftCanvas.content.length > 200 &&
+              draftCanvas.content.length < 250
                 ? true
-                : draftCanvas.content.length > 200,
+                : draftCanvas.isVisible,
             status: 'streaming',
           };