From 425b7e643852b7c640fc86988da621dbe4153b76 Mon Sep 17 00:00:00 2001
From: jeremyphilemon <git@jrmyphlmn.com>
Date: Tue, 19 Nov 2024 15:31:56 +0300
Subject: [PATCH 1/4] Make document call component clickable

---
 app/(chat)/chat/[id]/page.tsx |  1 -
 components/document.tsx       | 51 ++++++++++++++++++++++++++---------
 components/message.tsx        | 13 +++++++--
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/app/(chat)/chat/[id]/page.tsx b/app/(chat)/chat/[id]/page.tsx
index 5d5b06208..acf5da3d1 100644
--- a/app/(chat)/chat/[id]/page.tsx
+++ b/app/(chat)/chat/[id]/page.tsx
@@ -1,4 +1,3 @@
-
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 
diff --git a/components/document.tsx b/components/document.tsx
index bb415d98e..bf2ee288d 100644
--- a/components/document.tsx
+++ b/components/document.tsx
@@ -3,14 +3,19 @@ import type { SetStateAction } from 'react';
 import type { UIBlock } from './block';
 import { FileIcon, LoaderIcon, MessageIcon, PencilEditIcon } from './icons';
 
-const getActionText = (type: 'create' | 'update' | 'request-suggestions') => {
+const getActionText = (
+  type: 'create' | 'update' | 'request-suggestions',
+  tense: 'present' | 'past',
+) => {
   switch (type) {
     case 'create':
-      return 'Creating';
+      return tense === 'present' ? 'Creating' : 'Created';
     case 'update':
-      return 'Updating';
+      return tense === 'present' ? 'Updating' : 'Updated';
     case 'request-suggestions':
-      return 'Adding suggestions';
+      return tense === 'present'
+        ? 'Adding suggestions'
+        : 'Added suggestions to';
     default:
       return null;
   }
@@ -26,7 +31,6 @@ interface DocumentToolResultProps {
 export function DocumentToolResult({
   type,
   result,
-  block,
   setBlock,
 }: DocumentToolResultProps) {
   return (
@@ -62,8 +66,8 @@ export function DocumentToolResult({
           <MessageIcon />
         ) : null}
       </div>
-      <div className="">
-        {getActionText(type)} {result.title}
+      <div className="text-left">
+        {`${getActionText(type, 'past')} "${result.title}"`}
       </div>
     </button>
   );
@@ -72,11 +76,34 @@ export function DocumentToolResult({
 interface DocumentToolCallProps {
   type: 'create' | 'update' | 'request-suggestions';
   args: { title: string };
+  setBlock: (value: SetStateAction<UIBlock>) => void;
 }
 
-export function DocumentToolCall({ type, args }: DocumentToolCallProps) {
+export function DocumentToolCall({
+  type,
+  args,
+  setBlock,
+}: DocumentToolCallProps) {
   return (
-    <div className="w-fit border py-2 px-3 rounded-xl flex flex-row items-start justify-between gap-3">
+    <button
+      className="cursor pointer w-fit border py-2 px-3 rounded-xl flex flex-row items-start justify-between gap-3"
+      onClick={(event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+
+        const boundingBox = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+        };
+
+        setBlock((currentBlock) => ({
+          ...currentBlock,
+          isVisible: true,
+          boundingBox,
+        }));
+      }}
+    >
       <div className="flex flex-row gap-3 items-start">
         <div className="text-zinc-500 mt-1">
           {type === 'create' ? (
@@ -88,12 +115,12 @@ export function DocumentToolCall({ type, args }: DocumentToolCallProps) {
           ) : null}
         </div>
 
-        <div className="">
-          {getActionText(type)} {args.title}
+        <div className="text-left">
+          {`${getActionText(type, 'present')} "${args.title}"`}
         </div>
       </div>
 
       <div className="animate-spin mt-1">{<LoaderIcon />}</div>
-    </div>
+    </button>
   );
 }
diff --git a/components/message.tsx b/components/message.tsx
index 6340fcaef..cbbf2d2a9 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -104,13 +104,22 @@ export const PreviewMessage = ({
                     {toolName === 'getWeather' ? (
                       <Weather />
                     ) : toolName === 'createDocument' ? (
-                      <DocumentToolCall type="create" args={args} />
+                      <DocumentToolCall
+                        type="create"
+                        args={args}
+                        setBlock={setBlock}
+                      />
                     ) : toolName === 'updateDocument' ? (
-                      <DocumentToolCall type="update" args={args} />
+                      <DocumentToolCall
+                        type="update"
+                        args={args}
+                        setBlock={setBlock}
+                      />
                     ) : toolName === 'requestSuggestions' ? (
                       <DocumentToolCall
                         type="request-suggestions"
                         args={args}
+                        setBlock={setBlock}
                       />
                     ) : null}
                   </div>

From d18ae10f48cae439424e2f5a7a7e0ae96389d2f7 Mon Sep 17 00:00:00 2001
From: jeremyphilemon <git@jrmyphlmn.com>
Date: Tue, 19 Nov 2024 15:35:37 +0300
Subject: [PATCH 2/4] Update copy

---
 components/document.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/document.tsx b/components/document.tsx
index bf2ee288d..8ac4feee5 100644
--- a/components/document.tsx
+++ b/components/document.tsx
@@ -115,9 +115,7 @@ export function DocumentToolCall({
           ) : null}
         </div>
 
-        <div className="text-left">
-          {`${getActionText(type, 'present')} "${args.title}"`}
-        </div>
+        <div className="text-left">{`${getActionText(type, 'present')}`}</div>
       </div>
 
       <div className="animate-spin mt-1">{<LoaderIcon />}</div>

From ba3fc1132e482702b4af66054c8da4ce2cfc21ad Mon Sep 17 00:00:00 2001
From: jeremyphilemon <git@jrmyphlmn.com>
Date: Tue, 19 Nov 2024 15:37:25 +0300
Subject: [PATCH 3/4] Fix lint error

---
 components/document.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/document.tsx b/components/document.tsx
index 8ac4feee5..fd30c1f72 100644
--- a/components/document.tsx
+++ b/components/document.tsx
@@ -86,6 +86,7 @@ export function DocumentToolCall({
 }: DocumentToolCallProps) {
   return (
     <button
+      type="button"
       className="cursor pointer w-fit border py-2 px-3 rounded-xl flex flex-row items-start justify-between gap-3"
       onClick={(event) => {
         const rect = event.currentTarget.getBoundingClientRect();

From 05f8e453827bf9bf5cce51922dbc56c319f32a0a Mon Sep 17 00:00:00 2001
From: jeremyphilemon <git@jrmyphlmn.com>
Date: Tue, 19 Nov 2024 15:40:49 +0300
Subject: [PATCH 4/4] Update copy again

---
 components/document.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/document.tsx b/components/document.tsx
index fd30c1f72..4c7eb2eb7 100644
--- a/components/document.tsx
+++ b/components/document.tsx
@@ -116,7 +116,9 @@ export function DocumentToolCall({
           ) : null}
         </div>
 
-        <div className="text-left">{`${getActionText(type, 'present')}`}</div>
+        <div className="text-left">
+          {`${getActionText(type, 'present')} ${args.title ? `"${args.title}"` : ''}`}
+        </div>
       </div>
 
       <div className="animate-spin mt-1">{<LoaderIcon />}</div>