@worktango/ai-assistant 0.0.1-bjarke-test-1

package/express.d.ts

@@ -0,0 +1,55 @@
+import type { RequestHandler, Request, Application } from "express";
+
+export function setupAiAssistantRoutes(args: {
+  app: Application;
+  /**
+   * A function that returns the bearer token for the AI assistant to use for
+   * back-channel request proxying. This should be a JWT token that can be
+   * decoded on the `kazoo-web` application to authenticate the request.
+   */
+  getBearerToken: (
+    headers: Record<string, undefined | string | string[]>
+  ) => Promise<string>;
+  /**
+   * The host of the application to proxy requests to.
+   */
+  targetHost: string;
+  /**
+   * The port of the application to proxy requests to. Defaults to 80.
+   */
+  targetPort?: number;
+  /**
+   * The protocol of the application to proxy requests to. Defaults to "http".
+   */
+  targetProtocol?: string;
+  /**
+   * Whether to follow redirects. Defaults to true.
+   */
+  followRedirects?: boolean;
+  /**
+   * The route path to the local service's AI assistant. Defaults to
+   * "/ai-assistant".
+   */
+  route?: string;
+  /**
+   * The logger to use for logging.
+   */
+  logger?: Pick<typeof console, "log" | "error" | "debug">;
+  /**
+   * Middleware functions to run before the proxy request.
+   */
+  preflightMiddlewares?: RequestHandler[];
+  /**
+   * A function that should return the target path for the proxy request, based
+   * on the incoming full path. The path returned will be appended to the
+   * target host and port to form the final URL.
+   *
+   * @example
+   * ```ts
+   *   getTargetPath: (fullPath) => {
+   *     return fullPath;
+   *   }
+   * ```
+   */
+  getTargetPath: (fullPath: string) => string;
+}): void;

package/express.js

@@ -0,0 +1,4 @@
+// istanbul ignore file - for public bundles only
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+module.exports = require("./dist/express.js");

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@worktango/ai-assistant",
+  "version": "0.0.1-bjarke-test-1",
+  "files": [
+    "constants.js",
+    "dist",
+    "express.d.ts",
+    "express.js",
+    "react.d.ts",
+    "react.js",
+    "sharedTypes.ts"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.config.ts src/dev",
+    "dev:backend": "nodemon express.js",
+    "build:backend": "esbuild src/backend/express.ts --bundle --platform=node --outfile=dist/express.js \"--external:express\"",
+    "build:frontend": "vite build",
+    "build:all": "rm -rf dist && yarn build:backend && yarn build:frontend && yarn ts-node -T scripts/injectCssIntoBuild.ts",
+    "prepareBuildForPublish": "yarn ts-node -T scripts/prepareBuildForPublish.ts",
+    "publish": "yarn build:all && yarn prepareBuildForPublish && yarn actuallyPublishPackage",
+    "actuallyPublishPackage": "yarn npm publish --access public --tolerate-republish",
+    "gql:generate": "gql-generate"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.0.0",
+    "@ricky0123/vad-react": "^0.0.28",
+    "@sinclair/typebox": "^0.34",
+    "apexcharts": "^4.7.0",
+    "classnames": "^2.2.6",
+    "dom-to-semantic-markdown": "^1.3",
+    "html2canvas": "^1.4.1",
+    "http-proxy-middleware": "^3",
+    "json-nd": "^1",
+    "lodash.clonedeep": "^4",
+    "micromark": "^4",
+    "micromark-extension-gfm-table": "^2.1.1",
+    "react-apexcharts": "^1.7.0",
+    "uuid": "^9"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "esbuild": "^0.17.11",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.8",
+    "vite": "~6.3.5"
+  },
+  "graphqlCodeGeneration": {
+    "apiHooks": {
+      "config": {
+        "enumsAsTypes": true
+      }
+    }
+  },
+  "$schema": "../../packages/build-tools/schema.json",
+  "peerDependencies": {
+    "express": ">=4",
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/react.d.ts

@@ -0,0 +1,121 @@
+import type { TSchema, Type, Static, TObject } from "@sinclair/typebox";
+import {
+  AiAssistantProps,
+  ChatData,
+  ChatItem,
+  GetChatCompletionOptions,
+  GetStructuredResponseOptions,
+  ToolDeclaration,
+  AiAssistantSuggestedPromptsProps,
+  GetFollowUpSuggestions,
+  ChatDataFile,
+  AiAssistantControls,
+  FollowUpSuggestion,
+} from "./sharedTypes";
+
+export const getDefaultGetFollowUpSuggestions: (args: {
+  promptOverride?: string;
+}) => GetFollowUpSuggestions;
+
+export function AiAssistant(args: AiAssistantProps): JSX.Element;
+
+export function AiAssistantSuggestedPrompts(
+  args: AiAssistantSuggestedPromptsProps
+): JSX.Element;
+
+export const tools: {
+  kazooTools: {
+    getRewardsAndRecognitionCurrentUserTool: ToolDeclaration;
+  };
+  sharedTools: {
+    doMathTool: ToolDeclaration;
+    getCurrentTimeTool: ToolDeclaration;
+    askSingleShotQuestion: ToolDeclaration;
+    analyzeCurrentPage: ToolDeclaration;
+  };
+  createTool<TParams extends TSchema = TSchema>(args: {
+    name: string;
+    description: string;
+    parameters?: (t: typeof Type) => TParams;
+    fulfill: (args: Static<TParams>) => Promise<string | ChatDataFile>;
+    chatItemMatches?: (chatItem: ChatItem) => boolean;
+  }): ToolDeclaration;
+} = {};
+
+export const config: {
+  /**
+   * Get the URL for the LLM call.
+   */
+  getLlmCallUrl: () => string;
+  /**
+   * Get the URL for the structured response call.
+   */
+  getStructuredResponseUrl: () => string;
+  /**
+   * Get the URL for the Kazoo service.
+   */
+  getKazooUrl: (urlPath: string) => string;
+  /**
+   * Get the URL for the Pulse service.
+   */
+  getPulseUrl: (urlPath: string) => string;
+  /**
+   * Get the Pulse bearer token.
+   */
+  getPulseBearerToken: () => string;
+  /**
+   * Set the strategy for getting Kazoo URLs.
+   */
+  setKazooUrlStrategy: (strategy: (urlPath: string) => string) => void;
+  /**
+   * Set the strategy for getting LLM call URLs.
+   */
+  setLlmCallUrlStrategy: (strategy: (path: string) => string) => void;
+  /**
+   * Set the strategy for getting Pulse URLs.
+   */
+  setPulseUrlStrategy: (strategy: (urlPath: string) => string) => void;
+  /**
+   * Set the strategy for getting Pulse bearer tokens.
+   */
+  setPulseBearerTokenStrategy: (strategy: () => string) => void;
+  /**
+   * Set the strategy for getting structured response URLs.
+   */
+  setStructuredResponseUrlStrategy: (
+    strategy: (path: string) => string
+  ) => void;
+  /**
+   * Set the main content selector for the page for when taking screenshots.
+   */
+  setScreenshotMainContentSelector: (selector: string) => void;
+  /**
+   * Get the main content selector for the page for when taking screenshots.
+   */
+  getScreenshotMainContentSelector: () => string;
+  /**
+   * Set the strategy for getting synthesize URLs.
+   */
+  setSynthesizeUrlStrategy: (strategy: () => string) => void;
+  /**
+   * Set the strategy for getting transcribe URLs.
+   */
+  setTranscribeUrlStrategy: (strategy: () => string) => void;
+} = {};
+
+/**
+ * Makes a structured response request to the LLM API.
+ */
+export function getStructuredResponse<T extends TSchema>(
+  args: GetStructuredResponseOptions<T>
+): Promise<Static<T>>;
+
+/**
+ * Makes a chat completion request to the LLM API. Can be used both with streaming and non-streaming responses.
+ * For streaming responses, provides callbacks for handling chunks and errors.
+ */
+export function getChatCompletion(
+  args: GetChatCompletionOptions
+): Promise<ChatData[]>;
+
+export * from "./sharedTypes";

package/react.js

@@ -0,0 +1,4 @@
+// istanbul ignore file - for public bundles only
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+module.exports = require("./dist/react.umd.js");

package/sharedTypes.ts

@@ -0,0 +1,362 @@
+// Don't import from the generated folder, as it is removed when we build and publish the package.
+
+import type { Static, TSchema, Type } from "@sinclair/typebox";
+
+export type Maybe<T> = T | undefined;
+export interface Scalars {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  Upload: any;
+  /** All dates within this schema are ISO-8601 strings without time or timezone. */
+  Date: any;
+  /** All date-times are supposed to be are ISO-8601 strings, but we do accept input in other formats.  That behavior will change and we will replace Date and DateTime's behavior with that of StrictDate. */
+  DateTime: any;
+  /** A datetime input and output type only accepts ISO-8601 dates. */
+  StrictDateTimeInput: string;
+  /** General-use Upload input scalar */
+  FileToUpload: any;
+  /** General-use scalar to use for fields of JSON data. See https://www.npmjs.com/package/graphql-type-json for more information. */
+  JSONObject: any;
+  /** Represents a rich text document in its native ProseMirror document format. This is a JSON object with a specific schema. Use a TipTap editor instance from the @kazoohr/richtext-components package to interact with this format. */
+  RichTextDocument: any;
+}
+
+export type AiAssistantConversationMessageRole =
+  /** A message that was sent by the LLM */
+  | "MODEL"
+  /** A message comes from tool calling. */
+  | "TOOL"
+  /** A message that was sent by the user. */
+  | "USER";
+
+export interface Message {
+  __typename?: "Message";
+  /** The unique identifier of the message. */
+  id: Scalars["ID"];
+  /** The role of the message. */
+  role: AiAssistantConversationMessageRole;
+  /** The text content of the message. */
+  messageText: Scalars["String"];
+  /** The conversation that the message belongs to. */
+  conversationId: Scalars["String"];
+  /** Optional metadata for the message to store such as toolNames etc */
+  metadata?: Maybe<Scalars["JSONObject"]>;
+}
+
+export type AiAssistantSuggestedPromptsProps = {
+  suggestedPrompts: Record<string, AiAssistantSuggestedPrompt[]>;
+  onSelect: (prompt: AiAssistantSuggestedPrompt) => void | Promise<void>;
+  includeGlobalPrompts?: boolean;
+};
+
+export type AiAssistantSuggestedPrompt = {
+  title: string;
+  fullPrompt?: string;
+};
+
+export type SupportedTextModel = "small" | "medium" | "large";
+
+export type ChatItem = {
+  role: "user" | "model" | "tool";
+  parts: ChatData[];
+};
+
+export type ToolDeclaration<TParams extends TSchema = TSchema> = {
+  name: string;
+  description: string;
+  parameters?: any;
+  chatItemMatches?: (chatItem: {
+    role: "user" | "model" | "tool";
+    parts: ChatData[];
+  }) => boolean;
+  fulfill: (result: Static<TParams>) => Promise<string | ChatDataFile>;
+};
+
+/**
+ * Debug info added during the execution of the AI assistant.
+ */
+export type DebugInfo = {
+  time: Date;
+  message: string;
+  data?: any;
+  level: "info" | "error" | "warn";
+}[];
+
+export type PropRefs = {
+  onAfterLlmCall?: (messages: Omit<Message, "__typename">[]) => void;
+  onBeforeLlmCall?: () => void;
+  onError?: (error: Error) => void;
+  onChunkAdded?: () => void;
+  tools?: ToolDeclaration[];
+  model?: SupportedTextModel;
+  /**
+   * The current state of the chat.
+   *
+   * When to access this:
+   * - When you're in async handler functions
+   * - When you're in callbacks
+   *
+   * When NOT to access this:
+   * - When you're in anywhere in the UI state rendering path
+   *
+   * If you're rendering the UI, use the `messages` prop, please. This is for
+   * AI assistant state, which often requires up-to-date state for making
+   * updates.
+   */
+  messages: ChatStateTree;
+  temperature?: number;
+  isMounted: boolean;
+  systemInstruction?: () => string | Promise<string>;
+  getConversationById: (
+    conversationId: string
+  ) => ChatStateTree[string] | undefined;
+  getFollowUpSuggestions?: GetFollowUpSuggestions;
+  setFollowUpSuggestionsByConversationId: React.Dispatch<
+    React.SetStateAction<Record<string, FollowUpSuggestion[]>>
+  >;
+  handleSendUserMessage: (args: {
+    conversationId?: string;
+    messageText: string;
+  }) => Promise<void>;
+  setPrompt: (
+    conversationId: string | undefined,
+    prompt: string | ((prev: string) => string)
+  ) => void;
+  onSelectedConversationChange?: (
+    conversationId: string | undefined,
+    messages: ChatStateTree
+  ) => void;
+  selectedConversationId: string | undefined;
+  onSelectedConversationLoaded?: (
+    /**
+     * The conversation that loaded.
+     */
+    conversationId: string | undefined,
+    /**
+     * The conversation that is currently selected
+     */
+    selectedConversationId: string | undefined,
+    messages: ChatStateTree
+  ) => void;
+  sendMessages: (conversationId: string) => Promise<boolean>;
+  setMessages: React.Dispatch<React.SetStateAction<ChatStateTree>>;
+};
+
+export type ChatData =
+  | ChatDataText
+  | ChatDataToolCall
+  | ChatDataToolResult
+  | ChatDataFile;
+
+export type ChatDataText = { type: "text"; text: string };
+
+export type ChatDataFile = {
+  type: "file";
+  toolName: string;
+  fileUri: string;
+  mimeType: string;
+  args?: unknown;
+};
+
+export type ChatDataToolCall = {
+  type: "toolCall";
+  toolName: string;
+  args: Record<string, unknown>;
+};
+
+export type ChatDataToolResult = {
+  type: "toolResult";
+  toolName: string;
+  args?: unknown;
+  result: any;
+};
+
+export type ChatHistoryItem = {
+  title: string;
+  messages: any[];
+  [key: string]: any;
+};
+
+export type GetFollowUpSuggestions = (args: {
+  conversation: ChatStateTree[string];
+}) => Promise<AiAssistantSuggestedPrompt[]>;
+
+export type ChatHistory = Record<string, ChatHistoryItem[]>;
+
+export type ChatSizes = "half" | "full";
+
+export type AiAssistantControls = {
+  /**
+   * Set the prompt to use for the AI assistant.
+   * @param prompt - The prompt to set.
+   * @param submit - Whether to submit the prompt to the AI assistant once the new prompt is set.
+   */
+  setPrompt?: (prompt: string, submit?: boolean) => void;
+};
+
+export type AiAssistantProps = {
+  /**
+   * The title to display in the window. Default: "WorkTango AI Assistant".
+   */
+  windowTitle?: React.ReactNode;
+  /**
+   * The full suite of tools to use for the AI assistant.
+   */
+  tools?: ToolDeclaration<any>[];
+  /**
+   * Whether to enable debug mode. Default: false.
+   */
+  enableDebug?: boolean;
+  /**
+   * Whether to enable voice features. Default: false.
+   */
+  enableVoiceFeatures?: boolean;
+  /**
+   * The function to call when the AI assistant is closed.
+   */
+  onClose: () => void;
+  /**
+   * This is a callback event that is invoked when the user sends a message.
+   */
+  onSendMessage?: (message: string) => void;
+  /**
+   * Whether to show a close button in the chat window. Default: true.
+   */
+  hasCloseButton?: boolean;
+  /**
+   * The zero state to display when the chat window is empty.
+   */
+  chatWindowZeroState?: React.ReactNode;
+  /**
+   * Whether to show a button to toggle the chat size. Default: true.
+   */
+  hasToggleChatSizeButton?: boolean;
+  /**
+   * If true, the chat history (list of past conversations) will be shown, by default
+   */
+  hasChatHistory?: boolean;
+  /**
+   * The initial width of the chat window. Default: "default".
+   */
+  startingWidth?: ChatSizes;
+  /**
+   * The system instruction to use for the AI assistant.
+   */
+  systemInstruction?: () => string | Promise<string>;
+  /**
+   * The initial prompt to use for the AI assistant.
+   */
+  initialPrompt?: string;
+  /**
+   * A ref to the controls object for the AI assistant. Used to allow some form
+   * of control over the AI assistant from outside the component, allowing things
+   * like recommended prompts to be set from outside the component.
+   */
+  controls?: React.MutableRefObject<AiAssistantControls>;
+  /**
+   * Whether to show the chat history by default. Default: true.
+   */
+  chatHistoryShownByDefault?: boolean;
+  /**
+   * Otherwise, if there's a chat history, we start with the latest history, so
+   * the user can continue the previous conversation.
+   */
+  startWithNewChat?: boolean;
+  /**
+   * The minimum number of characters that must be entered before the user can
+   * submit a message. Default: 5.
+   */
+  minimumCharacterCount?: number;
+  /**
+   * The ID of the conversation to start with. If not provided, a new conversation will be created.
+   */
+  initialConversationId?: string;
+  /**
+   * Returns a set of follow-up suggestions for the given conversation.
+   */
+  getFollowUpSuggestions?: GetFollowUpSuggestions;
+  /**
+   * Invoked with a raw string of the chat (in plain text) to get a possible title
+   */
+  getChatTitle?: (chat: string) => Promise<string>;
+  /**
+   * The model size to use for the AI assistant. Default: "large".
+   */
+  model?: SupportedTextModel;
+};
+
+export type ChatStateTree = Record<
+  string,
+  {
+    id: string;
+    title: string;
+    isUpdatingTitle?: boolean;
+    updatedAt: Date;
+    isLoading: boolean;
+    messages: Omit<Message, "__typename">[];
+  }
+>;
+
+// ChatItem augmented with some UI stuff
+export type AugmentedChatItem = ChatItem & {
+  id?: string;
+  timestamp?: Date;
+  isPending?: boolean;
+  filterFromApiCalls?: boolean;
+};
+
+/**
+ * If { loading: true }, a small loader will be shown. You can use this show a
+ * loading state in any place of the UI.
+ */
+export type FollowUpSuggestion =
+  | { type: "loading"; id?: string }
+  | {
+      type?: "suggestion";
+      /**
+       * A unique identifier for the follow-up suggestion. This will be used to keep user-level state for dismissed items.
+       */
+      id: string;
+      /**
+       * The title of the follow-up suggestion. This will be displayed in the UI as a pill button, so keep it short.
+       */
+      title: string;
+      /**
+       * The function to call when the follow-up suggestion is clicked.
+       */
+      onClick: () => void;
+    };
+
+export interface Conversation {
+  id: string;
+  title: string;
+  updatedAt?: Date;
+  messages: {
+    conversationId: string;
+    id: string;
+    messageText: string;
+    role: string;
+  }[];
+}
+
+export type GetStructuredResponseOptions<T extends TSchema> = {
+  model?: SupportedTextModel | undefined;
+  temperature?: number | undefined;
+  prompt: string;
+  schema: (t: typeof Type) => T;
+};
+
+export type GetChatCompletionOptions = {
+  model?: SupportedTextModel | undefined;
+  temperature?: number | undefined;
+  systemInstruction?: string | undefined;
+  stream?: boolean;
+  messages: ChatItem[];
+  tools?: ToolDeclaration[] | undefined;
+  onChunk?: (chunk: ChatData) => void;
+  onError?: (error: Error) => void;
+  onComplete?: () => void;
+};