Add a test GET call to the agent endpoint

Author: kafkas

.gitignore

@@ -31,3 +31,5 @@ yarn-error.log*
 
 # turbo
 .turbo
+
+tsconfig.tsbuildinfo

apps/example-client/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "next build",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules",
+    "compile": "tsc -b",
     "dev": "next dev --port 3000",
     "lint": "TIMING=1 eslint \"src/**/*.ts*\"",
     "start": "next start"

apps/example-client/pages/index.tsx

@@ -1,10 +1,14 @@
 import { InteractionView } from '@proficient/react-sdk';
 
+const proficientApiKey = 'pk_USjnILHKBxXeJtiJ5WtAquoRb4IXjQTz1ScvRWTV6XduKxQ4at0YYxRpY28Ce0Qug6fkhm5R';
+const agentId = 'ag_T2SW501k1RGk8ZUv2Kaz11Kh';
+const userExternalId = 'user123';
+
 export default function ExampleClient() {
   return (
     <div>
       <h1>Example Client</h1>
-      <InteractionView apiKey="abc" userId="user123" />
+      <InteractionView apiKey={proficientApiKey} agentId={agentId} userExternalId={userExternalId} />
     </div>
   );
 }

package-lock.json

@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "build": "turbo run build",
+    "compile:example-client": "turbo run compile --filter=example-client",
     "dev": "turbo run dev --parallel",
     "dev:example-client": "turbo run dev --filter=example-client",
     "lint": "turbo run lint",

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@proficient/util": "^0.2.2",
+    "axios": "^1.3.2",
     "lorem-ipsum": "^2.0.8",
     "react-infinite-scroll-component": "^6.1.0",
     "react-textarea-autosize": "^8.4.0",

packages/react-sdk/package.json

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import * as React from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import TextareaAutosize from 'react-textarea-autosize';
@@ -9,7 +10,9 @@ import type { InteractionViewProps } from './types';
 
 export function InteractionView({
   apiKey,
-  userId,
+  agentId,
+  userExternalId,
+  userHmac,
   inputPlaceholder = 'Type something...',
   contentMaxLength = 500,
 }: InteractionViewProps) {
@@ -18,6 +21,40 @@ export function InteractionView({
   const [messageMap, setMessageMap] = React.useState<Record<string, Message>>({});
   const [hasMore, setHasMore] = React.useState(true);
 
+  const axiosInstance = axios.create({
+    baseURL: 'http://localhost:8080/client', // TODO: Update
+    headers: {
+      'Content-Type': 'application/json',
+      'X-PROFICIENT-API-KEY': apiKey,
+      'X-PROFICIENT-USER-EXTERNAL-ID': userExternalId,
+      'X-PROFICIENT-USER-HMAC': userHmac,
+    },
+  });
+
+  React.useEffect(() => {
+    (async () => {
+      console.log(`Fetching Agent: ${agentId}`);
+      // TODO: Should import from api package
+      interface Agent {
+        [key: string]: any;
+
+        id: string;
+        object: 'agent';
+        active: boolean;
+        name: string | null;
+        description: string;
+        created_at: number;
+        updated_at: number;
+      }
+      try {
+        const { data: agent } = await axiosInstance.get<Agent>(`/agents/${agentId}`);
+        console.log('SUCCESS:', agent);
+      } catch (err: any) {
+        console.log('ERROR:', err?.response?.data);
+      }
+    })();
+  }, [axiosInstance, agentId]);
+
   const loadNextBatch = React.useCallback(async () => {
     const { messages: receivedMessages, hasMore: hasMoreNext } = await db.getMessages(20, oldestMessageId.current);
     setMessageMap((prev) => {

packages/react-sdk/src/components/InteractionView/InteractionView.tsx

@@ -1,6 +1,8 @@
 export interface InteractionViewProps {
   apiKey: string;
-  userId: string;
+  agentId: string;
+  userExternalId: string;
+  userHmac?: string;
   inputPlaceholder?: string;
   contentMaxLength?: number;
 }

packages/react-sdk/src/components/InteractionView/types.ts

@@ -5,11 +5,16 @@
       "dependsOn": ["^build"],
       "outputs": ["dist/**", ".next/**"]
     },
-    "lint": {
-      "outputs": []
+    "compile": {
+      "dependsOn": ["^build"]
     },
     "dev": {
-      "cache": false
+      "cache": false,
+      "persistent": true,
+      "dependsOn": ["^build"]
+    },
+    "lint": {
+      "outputs": []
     }
   }
 }