Adds chatbot demo to Burr

This relies on the new endpoint. Counter is still a WIP but that should
be easy.

telemetry/ui/package.json

@@ -13,6 +13,7 @@
     "@types/node": "^16.18.82",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
+    "@types/react-select": "^5.0.1",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@uiw/react-json-view": "^2.0.0-alpha.12",
     "clsx": "^2.1.0",
@@ -21,11 +22,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "reactflow": "^11.10.4",
+    "remark-gfm": "^4.0.0",
     "tailwindcss-question-mark": "^0.4.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

telemetry/ui/src/App.tsx

@@ -2,9 +2,11 @@ import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-d
 import './App.css';
 import { ProjectList } from './components/routes/ProjectList';
 import { AppList } from './components/routes/AppList';
-import { AppView } from './components/routes/app/AppView';
+import { AppViewContainer } from './components/routes/app/AppView';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { AppContainer } from './components/nav/appcontainer';
+import { ChatbotWithTelemetry } from './examples/Chatbot';
+import { Counter } from './examples/Counter';
 
 /**
  * Basic application. We have an AppContainer -- this has a breadcrumb and a sidebar.
@@ -30,7 +32,9 @@ const App = () => {
             <Route path="/" element={<Navigate to="/projects" />} />
             <Route path="/projects" element={<ProjectList />} />
             <Route path="/project/:projectId" element={<AppList />} />
-            <Route path="/project/:projectId/:appId" element={<AppView />} />
+            <Route path="/project/:projectId/:appId" element={<AppViewContainer />} />
+            <Route path="/demos/counter" element={<Counter />} />
+            <Route path="/demos/chatbot" element={<ChatbotWithTelemetry />} />
             <Route path="*" element={<Navigate to="/projects" />} />
           </Routes>
         </AppContainer>

telemetry/ui/src/api/index.ts

@@ -13,6 +13,7 @@ export type { ApplicationModel } from './models/ApplicationModel';
 export type { ApplicationSummary } from './models/ApplicationSummary';
 export type { BeginEntryModel } from './models/BeginEntryModel';
 export type { BeginSpanModel } from './models/BeginSpanModel';
+export { ChatItem } from './models/ChatItem';
 export type { EndEntryModel } from './models/EndEntryModel';
 export type { EndSpanModel } from './models/EndSpanModel';
 export type { HTTPValidationError } from './models/HTTPValidationError';

telemetry/ui/src/api/models/ChatItem.ts

@@ -0,0 +1,21 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ChatItem = {
+  content: string;
+  type: ChatItem.type;
+  role: ChatItem.role;
+};
+export namespace ChatItem {
+  export enum type {
+    IMAGE = 'image',
+    TEXT = 'text',
+    CODE = 'code',
+    ERROR = 'error'
+  }
+  export enum role {
+    USER = 'user',
+    ASSISTANT = 'assistant'
+  }
+}

telemetry/ui/src/api/services/DefaultService.ts

@@ -4,113 +4,195 @@
 /* eslint-disable */
 import type { ApplicationLogs } from '../models/ApplicationLogs';
 import type { ApplicationSummary } from '../models/ApplicationSummary';
+import type { ChatItem } from '../models/ChatItem';
 import type { Project } from '../models/Project';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
 export class DefaultService {
-    /**
-     * Get Projects
-     * Gets all projects visible by the user.
-     *
-     * :param request: FastAPI request
-     * :return:  a list of projects visible by the user
-     * @returns Project Successful Response
-     * @throws ApiError
-     */
-    public static getProjectsApiV0ProjectsGet(): CancelablePromise<Array<Project>> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/api/v0/projects',
-        });
-    }
-    /**
-     * Get Apps
-     * Gets all apps visible by the user
-     *
-     * :param request: FastAPI request
-     * :param project_id: project name
-     * :return: a list of projects visible by the user
-     * @param projectId
-     * @returns ApplicationSummary Successful Response
-     * @throws ApiError
-     */
-    public static getAppsApiV0ProjectIdAppsGet(
-        projectId: string,
-    ): CancelablePromise<Array<ApplicationSummary>> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/api/v0/{project_id}/apps',
-            path: {
-                'project_id': projectId,
-            },
-            errors: {
-                422: `Validation Error`,
-            },
-        });
-    }
-    /**
-     * Get Application Logs
-     * Lists steps for a given App.
-     * TODO: add streaming capabilities for bi-directional communication
-     * TODO: add pagination for quicker loading
-     *
-     * :param request: FastAPI
-     * :param project_id: ID of the project
-     * :param app_id: ID of the associated application
-     * :return: A list of steps with all associated step data
-     * @param projectId
-     * @param appId
-     * @returns ApplicationLogs Successful Response
-     * @throws ApiError
-     */
-    public static getApplicationLogsApiV0ProjectIdAppIdAppsGet(
-        projectId: string,
-        appId: string,
-    ): CancelablePromise<ApplicationLogs> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/api/v0/{project_id}/{app_id}/apps',
-            path: {
-                'project_id': projectId,
-                'app_id': appId,
-            },
-            errors: {
-                422: `Validation Error`,
-            },
-        });
-    }
-    /**
-     * Ready
-     * @returns boolean Successful Response
-     * @throws ApiError
-     */
-    public static readyApiV0ReadyGet(): CancelablePromise<boolean> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/api/v0/ready',
-        });
-    }
-    /**
-     * React App
-     * Quick trick to server the react app
-     * Thanks to https://github.com/hop-along-polly/fastapi-webapp-react for the example/demo
-     * @param restOfPath
-     * @returns any Successful Response
-     * @throws ApiError
-     */
-    public static reactAppRestOfPathGet(
-        restOfPath: string,
-    ): CancelablePromise<any> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/{rest_of_path}',
-            path: {
-                'rest_of_path': restOfPath,
-            },
-            errors: {
-                422: `Validation Error`,
-            },
-        });
-    }
+  /**
+   * Get Projects
+   * Gets all projects visible by the user.
+   *
+   * :param request: FastAPI request
+   * :return:  a list of projects visible by the user
+   * @returns Project Successful Response
+   * @throws ApiError
+   */
+  public static getProjectsApiV0ProjectsGet(): CancelablePromise<Array<Project>> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/api/v0/projects'
+    });
+  }
+  /**
+   * Get Apps
+   * Gets all apps visible by the user
+   *
+   * :param request: FastAPI request
+   * :param project_id: project name
+   * :return: a list of projects visible by the user
+   * @param projectId
+   * @returns ApplicationSummary Successful Response
+   * @throws ApiError
+   */
+  public static getAppsApiV0ProjectIdAppsGet(
+    projectId: string
+  ): CancelablePromise<Array<ApplicationSummary>> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/api/v0/{project_id}/apps',
+      path: {
+        project_id: projectId
+      },
+      errors: {
+        422: `Validation Error`
+      }
+    });
+  }
+  /**
+   * Get Application Logs
+   * Lists steps for a given App.
+   * TODO: add streaming capabilities for bi-directional communication
+   * TODO: add pagination for quicker loading
+   *
+   * :param request: FastAPI
+   * :param project_id: ID of the project
+   * :param app_id: ID of the associated application
+   * :return: A list of steps with all associated step data
+   * @param projectId
+   * @param appId
+   * @returns ApplicationLogs Successful Response
+   * @throws ApiError
+   */
+  public static getApplicationLogsApiV0ProjectIdAppIdAppsGet(
+    projectId: string,
+    appId: string
+  ): CancelablePromise<ApplicationLogs> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/api/v0/{project_id}/{app_id}/apps',
+      path: {
+        project_id: projectId,
+        app_id: appId
+      },
+      errors: {
+        422: `Validation Error`
+      }
+    });
+  }
+  /**
+   * Ready
+   * @returns boolean Successful Response
+   * @throws ApiError
+   */
+  public static readyApiV0ReadyGet(): CancelablePromise<boolean> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/api/v0/ready'
+    });
+  }
+  /**
+   * Chat Response
+   * Chat response endpoint.
+   *
+   * :param project_id: Project ID to run
+   * :param app_id: Application ID to run
+   * :param prompt: Prompt to send to the chatbot
+   * :return:
+   * @param projectId
+   * @param appId
+   * @param prompt
+   * @returns ChatItem Successful Response
+   * @throws ApiError
+   */
+  public static chatResponseApiV0ChatbotProjectIdAppIdResponsePost(
+    projectId: string,
+    appId: string,
+    prompt: string
+  ): CancelablePromise<Array<ChatItem>> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/api/v0/chatbot/{project_id}/{app_id}/response',
+      path: {
+        project_id: projectId,
+        app_id: appId
+      },
+      query: {
+        prompt: prompt
+      },
+      errors: {
+        422: `Validation Error`
+      }
+    });
+  }
+  /**
+   * Chat History
+   * @param projectId
+   * @param appId
+   * @returns ChatItem Successful Response
+   * @throws ApiError
+   */
+  public static chatHistoryApiV0ChatbotProjectIdAppIdHistoryGet(
+    projectId: string,
+    appId: string
+  ): CancelablePromise<Array<ChatItem>> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/api/v0/chatbot/{project_id}/{app_id}/history',
+      path: {
+        project_id: projectId,
+        app_id: appId
+      },
+      errors: {
+        422: `Validation Error`
+      }
+    });
+  }
+  /**
+   * Create New Application
+   * Quick helper to create a new application. Just returns true, you'll want to fetch afterwards.
+   * In a better chatbot you'd want to either have the frontend store this and create on demand or return
+   * the actual application model
+   * @param projectId
+   * @param appId
+   * @returns string Successful Response
+   * @throws ApiError
+   */
+  public static createNewApplicationApiV0ChatbotProjectIdAppIdCreatePost(
+    projectId: string,
+    appId: string
+  ): CancelablePromise<string> {
+    return __request(OpenAPI, {
+      method: 'POST',
+      url: '/api/v0/chatbot/{project_id}/{app_id}/create',
+      path: {
+        project_id: projectId,
+        app_id: appId
+      },
+      errors: {
+        422: `Validation Error`
+      }
+    });
+  }
+  /**
+   * React App
+   * Quick trick to server the react app
+   * Thanks to https://github.com/hop-along-polly/fastapi-webapp-react for the example/demo
+   * @param restOfPath
+   * @returns any Successful Response
+   * @throws ApiError
+   */
+  public static reactAppRestOfPathGet(restOfPath: string): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: 'GET',
+      url: '/{rest_of_path}',
+      path: {
+        rest_of_path: restOfPath
+      },
+      errors: {
+        422: `Validation Error`
+      }
+    });
+  }
 }