feat: agent preview stub

.eslintrc.cjs

@@ -5,6 +5,14 @@
  * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 module.exports = {
-  extends: ['eslint-config-salesforce-typescript', 'eslint-config-salesforce-license', 'plugin:sf-plugin/recommended'],
+  extends: [
+    'eslint-config-salesforce-typescript',
+    'eslint-config-salesforce-license',
+    'plugin:sf-plugin/recommended',
+    'xo-react/space',
+  ],
   root: true,
+  rules: {
+    'react/jsx-tag-spacing': 'off',
+  },
 };

messages/agent.preview.md

@@ -0,0 +1,19 @@
+# summary
+
+Summary of a command.
+
+# description
+
+More information about a command. Don't repeat the summary.
+
+# flags.name.summary
+
+Description of a flag.
+
+# flags.name.description
+
+More information about a flag. Don't repeat the summary.
+
+# examples
+
+- <%= config.bin %> <%= command.id %>

messages/agent.test.cancel.md

@@ -6,7 +6,7 @@ Cancel a running test for an Agent.
 
 Cancel a running test for an Agent, providing the AiEvaluation ID.
 
-# flags.id.summary
+# flags.job-id.summary
 
 The AiEvaluation ID.
 

package.json

@@ -9,18 +9,27 @@
     "@inquirer/input": "^4.0.1",
     "@inquirer/select": "^4.0.1",
     "@oclif/core": "^4",
-    "@salesforce/agents": "^0.1.4",
     "@oclif/multi-stage-output": "^0.7.12",
+    "@salesforce/agents": "^0.1.4",
     "@salesforce/core": "^8.5.2",
     "@salesforce/kit": "^3.2.1",
     "@salesforce/sf-plugins-core": "^12",
-    "ansis": "^3.3.2"
+    "ansis": "^3.3.2",
+    "groq-sdk": "^0.7.0",
+    "ink-text-input": "^6.0.0",
+    "ink": "^5.0.1",
+    "react": "^18.3.1"
   },
   "devDependencies": {
     "@oclif/plugin-command-snapshot": "^5.2.19",
     "@salesforce/cli-plugins-testkit": "^5.3.35",
     "@salesforce/dev-scripts": "^10.2.10",
     "@salesforce/plugin-command-reference": "^3.1.29",
+    "@types/react": "^18.3.3",
+    "eslint-config-xo-react": "^0.27.0",
+    "eslint-config-xo": "^0.45.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-sf-plugin": "^1.20.9",
     "oclif": "^4.15.12",
     "ts-node": "^10.9.2",
@@ -59,7 +68,8 @@
     ],
     "topics": {
       "agent": {
-        "description": "Commands to work with agents."
+        "description": "Commands to work with agents.",
+        "external": true
       }
     },
     "flexibleTaxonomy": true

schemas/agent-preview.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$ref": "#/definitions/AgentPreviewResult",
+  "definitions": {
+    "AgentPreviewResult": {
+      "type": "object",
+      "properties": {
+        "path": {
+          "type": "string"
+        }
+      },
+      "required": ["path"],
+      "additionalProperties": false
+    }
+  }
+}

src/commands/agent/generate/spec.ts

@@ -157,6 +157,7 @@ export default class AgentCreateSpec extends SfCommand<AgentCreateSpecResult> {
     this.spinner.start('Creating agent spec');
 
     const connection = flags['target-org'].getConnection(flags['api-version']);
+    // @ts-expect-error for now
     const agent = new Agent(connection, this.project as SfProject) as SfAgent;
     const agentSpec = await agent.createSpec({
       name: flags['file-name'].split('.json')[0],

src/commands/agent/preview.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import { SfCommand, Flags } from '@salesforce/sf-plugins-core';
+import { Messages } from '@salesforce/core';
+import React from 'react';
+import { render } from 'ink';
+import { AgentPreviewWindow } from '../../components/agent-preview-window.js';
+
+Messages.importMessagesDirectoryFromMetaUrl(import.meta.url);
+const messages = Messages.loadMessages('@salesforce/plugin-agent', 'agent.preview');
+
+export default class AgentPreview extends SfCommand<void> {
+  public static readonly summary = messages.getMessage('summary');
+  public static readonly description = messages.getMessage('description');
+  public static readonly examples = messages.getMessages('examples');
+  public static readonly enableJsonFlag = false;
+
+  public static readonly flags = {
+    name: Flags.string({
+      summary: messages.getMessage('flags.name.summary'),
+      description: messages.getMessage('flags.name.description'),
+      char: 'n',
+      required: false,
+    }),
+  };
+
+  // eslint-disable-next-line class-methods-use-this
+  public async run(): Promise<void> {
+    const instance = render(<AgentPreviewWindow />);
+    await instance.waitUntilExit();
+  }
+}

src/commands/agent/test/cancel.ts

@@ -29,7 +29,7 @@ export default class AgentTestCancel extends SfCommand<AgentTestCancelResult> {
     'job-id': Flags.string({
       char: 'i',
       required: true,
-      summary: messages.getMessage('flags.id.summary'),
+      summary: messages.getMessage('flags.job-id.summary'),
     }),
     'use-most-recent': Flags.boolean({
       char: 'r',

src/components/agent-preview-window.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import figures from '@inquirer/figures';
+import Groq from 'groq-sdk';
+import TextInput from 'ink-text-input';
+
+/**
+ * Ideas:
+ * - Limit height based on terminal height
+ * - Add keystroke to clear chat
+ * - Add keystroke to scroll up
+ * - Add keystroke to scroll down
+ */
+export function AgentPreviewWindow(): React.ReactNode {
+  const [comments, setComments] = React.useState<Array<{ timestamp: Date; role: 'system' | 'user'; content: string }>>(
+    []
+  );
+  const [query, setQuery] = React.useState('');
+  const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });
+  return (
+    <Box flexDirection="column">
+      {comments.length > 0 && (
+        <Box flexDirection="column">
+          {comments.map(({ timestamp, role, content }, idx) => (
+            <Box
+              key={role + '__' + timestamp.toISOString() + '__' + idx.toString()}
+              alignItems={role === 'user' ? 'flex-end' : 'flex-start'}
+              flexDirection="column"
+            >
+              <Box flexDirection="row" columnGap={1}>
+                <Text>{role === 'user' ? 'You' : role}</Text>
+                <Text color="gray">{timestamp.toLocaleString()}</Text>
+              </Box>
+              <Box
+                width={Math.min(process.stdout.columns - 4, content.length + 4)}
+                borderStyle="round"
+                paddingLeft={1}
+                paddingRight={1}
+              >
+                <Text>{content}</Text>
+              </Box>
+            </Box>
+          ))}
+          <Box paddingLeft={1} paddingRight={1}>
+            <Text dimColor>{'─'.repeat(process.stdout.columns - 2)}</Text>
+          </Box>
+        </Box>
+      )}
+
+      <Box>
+        <Text>{figures.pointer} </Text>
+        <TextInput
+          showCursor
+          value={query}
+          placeholder="Start typing…"
+          onChange={setQuery}
+          // TODO: fix this eslint error
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onSubmit={async (content) => {
+            if (!content) return;
+            setQuery('');
+
+            const stream = await groq.chat.completions.create({
+              messages: [...comments.map((c) => ({ role: c.role, content: c.content })), { role: 'user', content }],
+              model: 'gemma2-9b-it',
+              stream: true,
+            });
+            setComments((prev) => [...prev, { role: 'user', content, timestamp: new Date() }]);
+            // TODO: handle markdown formatting
+            let finalMessage = '';
+            for await (const chunk of stream) {
+              if (!chunk.choices[0]?.delta?.content) continue;
+              finalMessage += chunk.choices[0]?.delta?.content;
+              setComments((prev) => {
+                const lastComment = prev[prev.length - 1];
+                if (lastComment.role !== 'system')
+                  return [...prev, { role: 'system', content: finalMessage, timestamp: new Date() }];
+                return [...prev.slice(0, prev.length - 1), { ...lastComment, content: finalMessage }];
+              });
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}

tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "@salesforce/dev-config/tsconfig-strict-esm",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "jsx": "react"
   },
-  "include": ["./src/**/*.ts"]
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }