@worktango/ai-assistant 0.0.26 → 0.0.28

package/src/frontend/tools/useAiAssistantSession.ts

@@ -1,374 +0,0 @@
-import React from "react";
-
-import { coalesce } from "@kazoohr/helpers";
-import {
-  type ToolDeclaration,
-  type ChatItem,
-  type SupportedTextModel,
-  ChatData,
-  ChatDataText,
-  ChatDataToolResult,
-  ChatDataToolCall,
-} from "@kazoohr/llm/types";
-
-import { getLlmCallUrl } from "../config";
-
-export type ChatItemWithTimestamp = ChatItem & { timestamp?: Date };
-
-/**
- * This hook is used to manage the state of the AI assistant session.
- * It handles as much as possible of the LLM session, so that the dev
- * can focus on efficiently rendering the UI.
- */
-// eslint-disable-next-line max-lines-per-function, complexity
-export function useAiAssistantSession({
-  model,
-  initialMessages,
-  temperature,
-  onAfterLlmCall,
-  onBeforeLlmCall,
-  onError,
-  tools,
-  onChunkAdded,
-}: {
-  model?: SupportedTextModel;
-  initialMessages?: ChatItemWithTimestamp[];
-  temperature?: number;
-  onAfterLlmCall?: (messages: ChatItem[]) => void;
-  onBeforeLlmCall?: () => void;
-  onError?: (error: Error) => void;
-  tools?: ToolDeclaration[];
-  onChunkAdded?: () => void;
-} = {}) {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [messages, setMessages] = React.useState<ChatItemWithTimestamp[]>(
-    () =>
-      initialMessages?.map((msg) => ({
-        ...msg,
-        timestamp: coalesce(msg.timestamp, new Date()), // Adds timestamp to each message, even if not provided
-      })) ?? []
-  );
-
-  /**
-   * We use a ref to store the debug info. Debug info shouldn't trigger a re-
-   * render.
-   */
-  const debugInfo = React.useRef<DebugInfo>([]);
-
-  /**
-   * Sometimes, props change, but we don't want to recreate the callback functions
-   * so we use a ref to store them, so that our callbacks always grab the latest
-   * value.
-   */
-  const propRefs = React.useRef<PropRefs>({
-    onAfterLlmCall,
-    onBeforeLlmCall,
-    onError,
-    tools,
-  });
-
-  const sendMessages = React.useCallback(
-    // eslint-disable-next-line max-lines-per-function, complexity
-    async (messages: ChatItem[]) => {
-      try {
-        if (propRefs.current.onBeforeLlmCall) {
-          debugInfo.current.push({
-            time: new Date(),
-            message: "Calling onBeforeLlmCall",
-            level: "info",
-          });
-          propRefs.current.onBeforeLlmCall();
-        }
-      } catch (error) {
-        debugInfo.current.push({
-          time: new Date(),
-          message: "Error calling onBeforeLlmCall",
-          data: error,
-          level: "error",
-        });
-      }
-
-      const requestBody = {
-        model,
-        temperature,
-        stream: true,
-        messages,
-        tools,
-      };
-
-      setIsLoading(true);
-
-      debugInfo.current.push({
-        time: new Date(),
-        message: "Calling LLM API",
-        data: requestBody,
-        level: "info",
-      });
-
-      const response = await fetch(getLlmCallUrl(), {
-        method: "POST",
-        body: JSON.stringify(requestBody),
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "text/event-stream",
-        },
-      }).catch((error) => {
-        debugInfo.current.push({
-          time: new Date(),
-          message: "Error calling LLM API",
-          data: error,
-          level: "error",
-        });
-        propRefs.current.onError?.(
-          new Error("Unexpected error calling LLM API. Please try again.")
-        );
-      });
-
-      setIsLoading(false);
-
-      if (!response || !response.ok) {
-        propRefs.current.onError?.(
-          new Error("Unable to connect to LLM API. Please try again.")
-        );
-        return false;
-      }
-
-      try {
-        const reader = response.body?.getReader();
-        if (!reader) {
-          propRefs.current.onError?.(
-            new Error(
-              "Unexpected client error. Response body reader not available."
-            )
-          );
-          debugInfo.current.push({
-            time: new Date(),
-            message: "No reader available",
-            level: "error",
-          });
-          return false;
-        }
-
-        const decoder = new TextDecoder();
-        const chatDataText: ChatDataText = {
-          type: "text",
-          text: "",
-        };
-        const toolCalls: ChatDataToolCall[] = [];
-
-        // Add the user's message immediately
-        const newMessages: ChatItem[] = [...messages];
-        setMessages(newMessages);
-
-        let i = 1_000_000; // Bounding our loop, just in case
-        while (i--) {
-          const { done, value } = await reader.read();
-          if (done) {
-            break;
-          }
-
-          const chunk = decoder.decode(value);
-          debugInfo.current.push({
-            time: new Date(),
-            message: "Received chunk",
-            data: chunk,
-            level: "info",
-          });
-          const parsedChunk: ChatData = JSON.parse(chunk);
-
-          if (parsedChunk.type === "text") {
-            chatDataText.text += parsedChunk.text;
-          } else if (parsedChunk.type === "toolCall") {
-            toolCalls.push(parsedChunk);
-          }
-
-          // Update the last message's text content
-          setMessages((currentMessages) => {
-            const updatedMessages = [...currentMessages];
-
-            if (updatedMessages[updatedMessages.length - 1]?.role !== "model") {
-              updatedMessages.push({
-                role: "model",
-                parts: [],
-                timestamp: new Date(),
-              });
-            }
-
-            updatedMessages[updatedMessages.length - 1].parts = [
-              ...toolCalls,
-              ...(chatDataText.text ? [chatDataText] : []),
-            ];
-
-            if (onChunkAdded) {
-              onChunkAdded();
-            }
-
-            return updatedMessages;
-          });
-        }
-
-        debugInfo.current.push({
-          time: new Date(),
-          message: "Completed streaming response",
-          level: "info",
-          data: {
-            chatDataText,
-            toolCalls,
-          },
-        });
-
-        try {
-          if (propRefs.current.onAfterLlmCall) {
-            debugInfo.current.push({
-              time: new Date(),
-              message: "Calling onAfterLlmCall",
-              level: "info",
-            });
-            propRefs.current.onAfterLlmCall(newMessages);
-          }
-        } catch (error) {
-          debugInfo.current.push({
-            time: new Date(),
-            message: "Error calling onAfterLlmCall",
-            data: error,
-            level: "error",
-          });
-        } finally {
-          // This branch re-runs this task if the last message from the LLM was
-          // a tool call.
-          handlePendingToolCalls({
-            toolCalls,
-            setMessages,
-            sendMessages,
-            propRefs,
-            debugInfo,
-          });
-        }
-        return true;
-      } catch (streamError) {
-        debugInfo.current.push({
-          time: new Date(),
-          message: "Error processing stream",
-          data: {
-            message: streamError.message,
-            stack: streamError.stack,
-          },
-          level: "error",
-        });
-        propRefs.current.onError?.(
-          new Error("Unexpected error serving the request. Please try again.")
-        );
-        return false;
-      }
-    },
-    [model, temperature]
-  );
-
-  const sendUserMessage = React.useCallback(
-    async (message: string) => {
-      const originalMessages = [...messages];
-      const newMessage: ChatItemWithTimestamp = {
-        role: "user",
-        parts: [{ type: "text", text: message }],
-        timestamp: new Date(),
-      };
-      addMessage(newMessage);
-      const success = await sendMessages([...originalMessages, newMessage]);
-      if (!success) {
-        debugInfo.current.push({
-          time: new Date(),
-          message: "Error sending message. Reverting to original messages",
-          data: originalMessages,
-          level: "error",
-        });
-        setMessages(originalMessages);
-      }
-    },
-    [messages]
-  );
-
-  const addMessage = React.useCallback(
-    (message: ChatItem) => {
-      setMessages([...messages, message]);
-    },
-    [messages]
-  );
-
-  return {
-    isLoading,
-    messages,
-    setMessages,
-    debugInfo: debugInfo.current,
-    addMessage,
-    sendUserMessage,
-  };
-}
-
-type PropRefs = {
-  onAfterLlmCall?: (messages: ChatItem[]) => void;
-  onBeforeLlmCall?: () => void;
-  onError?: (error: Error) => void;
-  tools?: ToolDeclaration[];
-};
-
-type DebugInfo = {
-  time: Date;
-  message: string;
-  data?: any;
-  level: "info" | "error" | "warn";
-}[];
-
-async function handlePendingToolCalls({
-  toolCalls,
-  sendMessages,
-  setMessages,
-  propRefs,
-  debugInfo,
-}: {
-  toolCalls: ChatDataToolCall[];
-  setMessages: React.Dispatch<React.SetStateAction<ChatItem[]>>;
-  sendMessages: (messages: ChatItem[]) => Promise<boolean>;
-  propRefs: React.MutableRefObject<PropRefs>;
-  debugInfo: React.MutableRefObject<DebugInfo>;
-}): Promise<void> {
-  if (toolCalls.length === 0) {
-    return;
-  }
-
-  const toolResults: ChatDataToolResult[] = [];
-
-  for (const toolCall of toolCalls) {
-    const tool = propRefs.current.tools?.find(
-      (tool) => tool.name === toolCall.toolName
-    );
-    if (!tool) {
-      propRefs.current.onError?.(
-        new Error(`Tool ${toolCall.toolName} not found`)
-      );
-      debugInfo.current.push({
-        time: new Date(),
-        message: `Tool ${toolCall.toolName} not found`,
-        data: {
-          toolCall,
-          tools: propRefs.current.tools,
-        },
-        level: "error",
-      });
-      continue;
-    }
-
-    const result = await tool.fulfill(toolCall.args);
-    toolResults.push({
-      type: "toolResult" as const,
-      toolName: toolCall.toolName,
-      result,
-    });
-  }
-  const newMessage = { role: "tool" as const, parts: toolResults };
-  setMessages((currentMessages) => {
-    const newMessages = [...currentMessages, newMessage];
-    sendMessages(newMessages);
-    return newMessages;
-  });
-}

package/src/frontend/useStyles.ts

@@ -1,36 +0,0 @@
-import React from "react";
-
-import { setStateValue } from "@kazoohr/helpers";
-
-const CONFETTI_CSS = "$$CONFETTI_CSS_REPLACEME$$";
-
-/**
- * This hook injects the Confetti CSS into the page and sets a flag in the
- * window object to indicate that the CSS has been injected. We do this so
- * that we can avoid a flash of unstyled content (FOUC); and to make the
- * process of shipping this component far simpler.
- */
-export function useStyles() {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-  React.useEffect(() => {
-    // I could avoid this by updating our root `types`; but that would leave
-    // evidence of this ugly hack elsewhere in a codebase that it's not even
-    // needed for. So we'll just live with a lint rule ignore.
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const windowAsAny = window as any;
-    // istanbul ignore if - noop if the styles have already been injected
-    if (windowAsAny._confettiStylesHaveBeenInjected) {
-      setTimeout(setStateValue(setIsLoaded, true), 50);
-      return;
-    }
-    const styles = document.createElement("style");
-    styles.innerHTML = CONFETTI_CSS;
-    document.head.appendChild(styles);
-    windowAsAny._confettiStylesHaveBeenInjected = true;
-    setTimeout(setStateValue(setIsLoaded, true), 50);
-  }, []);
-
-  return {
-    isLoaded,
-  };
-}