Make document call component clickable

Author: jeremyphilemon

app/(chat)/chat/[id]/page.tsx

@@ -1,4 +1,3 @@
-
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 

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>
   );
 }

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>