enhance: use LLM to summarize the confirm prompt

actions/scripts/confirmPrompt.ts

@@ -0,0 +1,32 @@
+'use server';
+
+import { gpt } from '@/config/env';
+import { Arguments } from '@gptscript-ai/gptscript';
+
+export async function summarizeConfirmPrompt(
+  prompt: string,
+  command: string | undefined,
+  args: Arguments
+): Promise<string> {
+  let instructions = `Rewrite the following question for the user.
+  Hide any technical details, but still include things like file names, paths, IDs, and arguments.
+  If there are arguments, include them, but not as a JSON string. If there are no arguments, do not mention arguments.
+
+  Question:
+
+  ${prompt}`;
+  if (command) {
+    instructions += `\n${command}`;
+  }
+  switch (typeof args) {
+    case 'string':
+      instructions += `\nArguments: ${args}`;
+      break;
+    case 'object':
+      instructions += `\nArguments: ${JSON.stringify(args, null, 2)}`;
+      break;
+  }
+
+  const summary = await gpt().evaluate({ instructions });
+  return summary.text();
+}

components/chat/messages/confirmForm.tsx

@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { GoCheckCircle, GoXCircle, GoCheckCircleFill } from 'react-icons/go';
-import type { AuthResponse } from '@gptscript-ai/gptscript';
+import type { Arguments, AuthResponse } from '@gptscript-ai/gptscript';
 import { Button, Code, Tooltip } from '@nextui-org/react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 type ConfirmFormProps = {
   id: string;
   tool: string;
+  summary: string;
   message?: string;
   command?: string;
+  args: Arguments;
   onSubmit: (data: AuthResponse) => void;
   addTrusted: () => void;
 };
@@ -19,8 +21,10 @@ const ConfirmForm = ({
   onSubmit,
   tool,
   addTrusted,
+  summary,
   message,
   command,
+  args,
 }: ConfirmFormProps) => {
   const [loading, setLoading] = useState(false);
 
@@ -43,15 +47,29 @@ const ConfirmForm = ({
         className="!text-wrap prose overflow-x-auto dark:prose-invert p-4 !w-full !max-w-full prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg"
         remarkPlugins={[remarkGfm]}
       >
-        {message}
+        {summary}
       </Markdown>
-      {command && (
-        <Code className="ml-4 whitespace-pre-wrap">
-          {command.startsWith('Running')
-            ? command.replace('Running', '').replace(/`/g, '')
-            : command.replace(/`/g, '')}
-        </Code>
-      )}
+      <details className="text-sm ml-4">
+        <Markdown
+          className="!text-wrap text-sm prose overflow-x-auto dark:prose-invert p-4 !w-full !max-w-full prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg"
+          remarkPlugins={[remarkGfm]}
+        >
+          {message}
+        </Markdown>
+        {command && (
+          <Code className="ml-4 text-sm whitespace-pre-wrap">
+            {command.startsWith('Running')
+              ? command.replace('Running', '').replace(/`/g, '').trim()
+              : command.replace(/`/g, '').trim()}
+          </Code>
+        )}
+        {args && (
+          <Code className="ml-4 text-sm whitespace-pre-wrap">
+            Arguments:{' '}
+            {typeof args === 'string' ? args : JSON.stringify(args, null, 2)}
+          </Code>
+        )}
+      </details>
       <div className="flex justify-between mt-4 mx-4">
         <Tooltip
           content="Allow this command to be executed"

components/chat/useChatSocket.tsx

@@ -15,6 +15,7 @@ import ConfirmForm from './messages/confirmForm';
 import { rootTool, stringify } from '@/actions/gptscript';
 import { updateScript } from '@/actions/me/scripts';
 import { gatewayTool } from '@/actions/knowledge/util';
+import { summarizeConfirmPrompt } from '@/actions/scripts/confirmPrompt';
 
 const useChatSocket = (isEmpty?: boolean) => {
   const initiallyTrustedRepos = [
@@ -197,7 +198,7 @@ const useChatSocket = (isEmpty?: boolean) => {
   );
 
   const handleConfirmRequest = useCallback(
-    ({
+    async ({
       frame,
       state,
       name,
@@ -226,11 +227,19 @@ const useChatSocket = (isEmpty?: boolean) => {
           : `Proceed with running the following (or allow all **${tool}** calls)?`;
       }
 
+      const summary = await summarizeConfirmPrompt(
+        confirmMessage,
+        frame.displayText,
+        frame.input
+      );
+
       const form = (
         <ConfirmForm
           id={frame.id}
+          summary={summary}
           message={confirmMessage}
           command={frame.displayText}
+          args={frame.input}
           tool={frame.tool?.name || 'main'}
           addTrusted={addTrustedFor(frame)}
           onSubmit={(response: AuthResponse) => {