Close canvas while streaming (#500)

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>
@@ -489,6 +494,7 @@ export function Canvas({
                   onClick={() => {
                     handleVersionChange('toggle');
                   }}
+                  disabled={canvas.status === 'streaming'}
                 >
                   <DeltaIcon size={18} />
                 </Button>

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}

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') ? (

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',
           };