From 14e88a9c260c67939db4a6d18ca94966e54c4fdb Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Wed, 30 Oct 2024 21:28:33 +0530
Subject: [PATCH] De-emphasize input for past document version (#468)

---
 components/custom/canvas.tsx            | 22 ++++++++++++++++------
 components/custom/multimodal-input.tsx  |  2 +-
 components/custom/use-canvas-stream.tsx | 12 ++++++++----
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/components/custom/canvas.tsx b/components/custom/canvas.tsx
index f2e7288..3f444f0 100644
--- a/components/custom/canvas.tsx
+++ b/components/custom/canvas.tsx
@@ -270,7 +270,17 @@ export function Canvas({
           }}
           exit={{ opacity: 0, x: 10, scale: 0.95, transition: { delay: 0 } }}
         >
-          <div className="-right-12 w-12 bg-muted absolute h-dvh top-0" />
+          <AnimatePresence>
+            {!isCurrentVersion && (
+              <motion.div
+                className="left-0 absolute h-dvh w-[400px] top-0 bg-zinc-900/50 z-50"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+              />
+            )}
+          </AnimatePresence>
+
           <div className="flex flex-col h-full justify-between items-center gap-4">
             <div
               ref={messagesContainerRef}
@@ -379,7 +389,7 @@ export function Canvas({
         <div className="p-2 flex flex-row justify-between items-start">
           <div className="flex flex-row gap-4 items-start">
             <div
-              className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground"
+              className="cursor-pointer hover:bg-muted dark:hover:bg-zinc-700 p-2 rounded-lg text-muted-foreground"
               onClick={() => {
                 setCanvas(null);
               }}
@@ -412,7 +422,7 @@ export function Canvas({
 
           <div className="flex flex-row gap-1">
             <div
-              className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground"
+              className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
               onClick={() => {
                 handleVersionChange('prev');
               }}
@@ -420,7 +430,7 @@ export function Canvas({
               <UndoIcon size={18} />
             </div>
             <div
-              className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground"
+              className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
               onClick={() => {
                 handleVersionChange('next');
               }}
@@ -429,8 +439,8 @@ export function Canvas({
             </div>
             <div
               className={cx(
-                'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground',
-                { 'bg-muted': mode === 'diff' }
+                'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700',
+                { 'bg-muted dark:bg-zinc-700': mode === 'diff' }
               )}
               onClick={() => {
                 handleVersionChange('toggle');
diff --git a/components/custom/multimodal-input.tsx b/components/custom/multimodal-input.tsx
index 4ac7c95..1615ef8 100644
--- a/components/custom/multimodal-input.tsx
+++ b/components/custom/multimodal-input.tsx
@@ -228,7 +228,7 @@ export function MultimodalInput({
         value={input}
         onChange={handleInput}
         className={cx(
-          'min-h-[24px] overflow-hidden resize-none rounded-lg text-base bg-muted',
+          'min-h-[24px] overflow-hidden resize-none rounded-xl text-base bg-muted',
           className
         )}
         rows={3}
diff --git a/components/custom/use-canvas-stream.tsx b/components/custom/use-canvas-stream.tsx
index efde09d..ddd2857 100644
--- a/components/custom/use-canvas-stream.tsx
+++ b/components/custom/use-canvas-stream.tsx
@@ -5,6 +5,7 @@ import { useSWRConfig } from 'swr';
 import { Suggestion } from '@/db/schema';
 
 import { UICanvas } from './canvas';
+import useWindowSize from './use-window-size';
 
 type StreamingDelta = {
   type: 'text-delta' | 'title' | 'id' | 'suggestion' | 'clear' | 'finish';
@@ -31,6 +32,9 @@ export function useCanvasStream({
     }
   }, [optimisticSuggestions, mutate]);
 
+  const { width: windowWidth = 1920, height: windowHeight = 1080 } =
+    useWindowSize();
+
   useEffect(() => {
     const mostRecentDelta = streamingData?.at(-1);
     if (!mostRecentDelta) return;
@@ -46,10 +50,10 @@ export function useCanvasStream({
           documentId: delta.type === 'id' ? (delta.content as string) : '',
           status: 'idle',
           boundingBox: {
-            top: 0,
-            left: 0,
-            width: 0,
-            height: 0,
+            top: windowHeight / 4,
+            left: windowWidth / 4,
+            width: 250,
+            height: 50,
           },
         };
       }