@btst/stack 1.3.0 → 1.4.0

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-interface.cjs

@@ -0,0 +1,315 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@ai-sdk/react');
+const React = require('react');
+const reactQuery = require('@tanstack/react-query');
+const chatMessage = require('./chat-message.cjs');
+const chatInput = require('./chat-input.cjs');
+const betterStackAttribution = require('../../../../../../ui/src/components/better-stack-attribution.cjs');
+const scrollArea = require('../../../../../../ui/src/components/scroll-area.cjs');
+const ai = require('ai');
+const utils = require('../../../../../../ui/src/lib/utils.cjs');
+const context = require('@btst/stack/context');
+const index = require('../localization/index.cjs');
+const client = require('@btst/stack/plugins/client');
+const plugins_aiChat_queryKeys = require('../../../../../../../plugins/ai-chat/query-keys.cjs');
+const chatHooks = require('../hooks/chat-hooks.cjs');
+
+function ChatInterface({
+  apiPath = "/api/chat",
+  initialMessages,
+  id,
+  variant = "full",
+  className
+}) {
+  const {
+    navigate,
+    localization: customLocalization,
+    apiBaseURL,
+    apiBasePath,
+    headers,
+    mode,
+    showAttribution
+  } = context.usePluginOverrides(
+    "ai-chat",
+    { showAttribution: true }
+  );
+  const basePath = context.useBasePath();
+  const isPublicMode = mode === "public";
+  const localization = { ...index.AI_CHAT_LOCALIZATION, ...customLocalization };
+  const queryClient = reactQuery.useQueryClient();
+  const conversationsListQueryKey = React.useMemo(() => {
+    if (isPublicMode) return ["ai-chat", "disabled"];
+    const client$1 = client.createApiClient({
+      baseURL: apiBaseURL,
+      basePath: apiBasePath
+    });
+    const queries = plugins_aiChat_queryKeys.createAiChatQueryKeys(client$1, headers);
+    return queries.conversations.list().queryKey;
+  }, [apiBaseURL, apiBasePath, headers, isPublicMode]);
+  const [currentConversationId, setCurrentConversationId] = React.useState(isPublicMode ? void 0 : id);
+  const isFirstMessageSentRef = React.useRef(false);
+  const hasNavigatedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!isPublicMode) {
+      setCurrentConversationId(id);
+      isFirstMessageSentRef.current = false;
+      hasNavigatedRef.current = false;
+    }
+  }, [id, isPublicMode]);
+  const { conversation, isLoading: isLoadingConversation } = chatHooks.useConversation(
+    id,
+    { enabled: !!id && !isPublicMode }
+  );
+  const { conversations } = chatHooks.useConversations({ enabled: !isPublicMode });
+  const conversationIdRef = React.useRef(
+    isPublicMode ? void 0 : id
+  );
+  React.useEffect(() => {
+    if (!isPublicMode) {
+      conversationIdRef.current = currentConversationId;
+    }
+  }, [currentConversationId, isPublicMode]);
+  const editMessagesRef = React.useRef(null);
+  const transport = React.useMemo(
+    () => new ai.DefaultChatTransport({
+      api: apiPath,
+      // In public mode, don't send conversationId
+      body: isPublicMode ? void 0 : () => ({ conversationId: conversationIdRef.current }),
+      // Handle edit operations by using truncated messages from the ref
+      prepareSendMessagesRequest: ({ messages: hookMessages }) => {
+        if (editMessagesRef.current !== null) {
+          const newUserMessage = hookMessages[hookMessages.length - 1];
+          const messagesToSend = [...editMessagesRef.current];
+          if (newUserMessage) {
+            messagesToSend.push(newUserMessage);
+          }
+          editMessagesRef.current = null;
+          return {
+            body: {
+              messages: messagesToSend,
+              conversationId: conversationIdRef.current
+            }
+          };
+        }
+        return {
+          body: {
+            messages: hookMessages,
+            conversationId: conversationIdRef.current
+          }
+        };
+      }
+    }),
+    [apiPath, isPublicMode]
+  );
+  const { messages, sendMessage, status, error, setMessages, regenerate } = react.useChat({
+    transport,
+    onError: (err) => {
+      console.error("useChat onError:", err);
+    },
+    onFinish: async () => {
+      if (isPublicMode) return;
+      await queryClient.invalidateQueries({
+        queryKey: conversationsListQueryKey
+      });
+      if (isFirstMessageSentRef.current && !id && !hasNavigatedRef.current) {
+        hasNavigatedRef.current = true;
+        await queryClient.refetchQueries({
+          queryKey: conversationsListQueryKey
+        });
+        const cachedConversations = queryClient.getQueryData(conversationsListQueryKey);
+        if (cachedConversations && cachedConversations.length > 0) {
+          const newConversation = cachedConversations[0];
+          if (newConversation) {
+            setCurrentConversationId(newConversation.id);
+            conversationIdRef.current = newConversation.id;
+            const newUrl = `${basePath}/chat/${newConversation.id}`;
+            if (typeof window !== "undefined") {
+              window.history.replaceState(
+                { ...window.history.state },
+                "",
+                newUrl
+              );
+            }
+          }
+        }
+      }
+    }
+  });
+  React.useEffect(() => {
+    if (conversation?.messages && conversation.messages.length > 0 && messages.length === 0) {
+      const uiMessages = conversation.messages.filter((m) => m.role !== "data").map((m) => {
+        let parts;
+        try {
+          const parsed = JSON.parse(m.content);
+          if (Array.isArray(parsed)) {
+            parts = parsed;
+          } else {
+            parts = [{ type: "text", text: m.content }];
+          }
+        } catch {
+          parts = [{ type: "text", text: m.content }];
+        }
+        return {
+          id: m.id,
+          role: m.role,
+          parts
+        };
+      });
+      setMessages(uiMessages);
+    }
+  }, [conversation, messages.length, setMessages]);
+  React.useEffect(() => {
+    if (initialMessages && initialMessages.length > 0 && messages.length === 0) {
+      setMessages(initialMessages);
+    }
+  }, [initialMessages, setMessages, messages.length]);
+  const [input, setInput] = React.useState("");
+  const [attachedFiles, setAttachedFiles] = React.useState([]);
+  const scrollRef = React.useRef(null);
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      const scrollElement = scrollRef.current.querySelector(
+        "[data-radix-scroll-area-viewport]"
+      );
+      if (scrollElement) {
+        scrollElement.scrollTop = scrollElement.scrollHeight;
+      }
+    }
+  }, [messages]);
+  const handleInputChange = (e) => {
+    setInput(e.target.value);
+  };
+  const handleSubmit = async (e, files) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text && (!files || files.length === 0)) return;
+    if (!isPublicMode && !id && messages.length === 0) {
+      isFirstMessageSentRef.current = true;
+    }
+    const savedInput = input;
+    const savedFiles = files ? [...files] : [];
+    setInput("");
+    setAttachedFiles([]);
+    try {
+      if (files && files.length > 0) {
+        const fileUIParts = files.map((file) => ({
+          type: "file",
+          mediaType: file.mediaType,
+          url: file.url,
+          filename: file.filename
+        }));
+        await sendMessage({
+          text: text || "",
+          // AI SDK requires text, even if empty
+          files: fileUIParts
+        });
+      } else {
+        await sendMessage({ text });
+      }
+    } catch (error2) {
+      setInput(savedInput);
+      setAttachedFiles(savedFiles);
+      console.error("Error sending message:", error2);
+    }
+  };
+  const isLoading = status === "streaming" || status === "submitted";
+  const handleRetry = React.useCallback(() => {
+    regenerate();
+  }, [regenerate]);
+  const [pendingEdit, setPendingEdit] = React.useState(null);
+  React.useEffect(() => {
+    if (pendingEdit && messages.length === pendingEdit.expectedLength) {
+      const textToSend = pendingEdit.text;
+      setPendingEdit(null);
+      sendMessage({ text: textToSend });
+    }
+  }, [messages.length, pendingEdit, sendMessage]);
+  const handleEditMessage = React.useCallback(
+    (messageId, newText) => {
+      const messageIndex = messages.findIndex((m) => m.id === messageId);
+      if (messageIndex === -1) return;
+      const messageToEdit = messages[messageIndex];
+      if (!messageToEdit || messageToEdit.role !== "user") return;
+      const truncatedMessages = messages.slice(0, messageIndex);
+      editMessagesRef.current = truncatedMessages;
+      setPendingEdit({ text: newText, expectedLength: messageIndex });
+      setMessages(truncatedMessages);
+    },
+    [messages, setMessages]
+  );
+  const isWidget = variant === "widget";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "flex flex-col h-full w-full bg-background",
+          isWidget && "rounded-xl",
+          className
+        ),
+        "data-testid": "chat-interface",
+        children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { ref: scrollRef, className: "flex-1 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex flex-col p-4",
+              isWidget ? "max-w-full" : "max-w-3xl mx-auto w-full"
+            ),
+            children: [
+              messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: localization.CHAT_EMPTY_STATE }) }) : messages.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                chatMessage.ChatMessage,
+                {
+                  message: m,
+                  isStreaming: status === "streaming" && m.id === messages[messages.length - 1]?.id && m.role === "assistant",
+                  variant: isWidget ? "compact" : "default",
+                  onRetry: (
+                    // Only show retry on the last assistant message
+                    m.role === "assistant" && index === messages.length - 1 ? handleRetry : void 0
+                  ),
+                  onEdit: (
+                    // Allow editing user messages
+                    m.role === "user" ? (newText) => handleEditMessage(m.id, newText) : void 0
+                  ),
+                  isRetrying: isLoading && m.role === "assistant"
+                },
+                m.id || `msg-${index}`
+              )),
+              isLoading && messages[messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-muted-foreground text-sm py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: localization.CHAT_LOADING }) }),
+              error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-destructive text-sm py-4 px-3 bg-destructive/10 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: localization.CHAT_ERROR }) })
+            ]
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "border-t bg-background p-4",
+          isWidget ? "px-3 py-3" : "px-4"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(!isWidget && "max-w-3xl mx-auto"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chatInput.ChatInput,
+            {
+              input,
+              handleInputChange,
+              handleSubmit,
+              isLoading,
+              placeholder: localization.CHAT_PLACEHOLDER,
+              variant: isWidget ? "compact" : "default",
+              onFilesAttached: setAttachedFiles,
+              attachedFiles
+            }
+          ),
+          showAttribution && /* @__PURE__ */ jsxRuntime.jsx(betterStackAttribution.BetterStackAttribution, {})
+        ] })
+      }
+    )
+  ] });
+}
+
+exports.ChatInterface = ChatInterface;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-interface.mjs

@@ -0,0 +1,313 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useChat } from '@ai-sdk/react';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { ChatMessage } from './chat-message.mjs';
+import { ChatInput } from './chat-input.mjs';
+import { BetterStackAttribution } from '../../../../../../ui/src/components/better-stack-attribution.mjs';
+import { ScrollArea } from '../../../../../../ui/src/components/scroll-area.mjs';
+import { DefaultChatTransport } from 'ai';
+import { cn } from '../../../../../../ui/src/lib/utils.mjs';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { AI_CHAT_LOCALIZATION } from '../localization/index.mjs';
+import { createApiClient } from '@btst/stack/plugins/client';
+import { createAiChatQueryKeys } from '../../../../../../../plugins/ai-chat/query-keys.mjs';
+import { useConversation, useConversations } from '../hooks/chat-hooks.mjs';
+
+function ChatInterface({
+  apiPath = "/api/chat",
+  initialMessages,
+  id,
+  variant = "full",
+  className
+}) {
+  const {
+    navigate,
+    localization: customLocalization,
+    apiBaseURL,
+    apiBasePath,
+    headers,
+    mode,
+    showAttribution
+  } = usePluginOverrides(
+    "ai-chat",
+    { showAttribution: true }
+  );
+  const basePath = useBasePath();
+  const isPublicMode = mode === "public";
+  const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+  const queryClient = useQueryClient();
+  const conversationsListQueryKey = useMemo(() => {
+    if (isPublicMode) return ["ai-chat", "disabled"];
+    const client = createApiClient({
+      baseURL: apiBaseURL,
+      basePath: apiBasePath
+    });
+    const queries = createAiChatQueryKeys(client, headers);
+    return queries.conversations.list().queryKey;
+  }, [apiBaseURL, apiBasePath, headers, isPublicMode]);
+  const [currentConversationId, setCurrentConversationId] = useState(isPublicMode ? void 0 : id);
+  const isFirstMessageSentRef = useRef(false);
+  const hasNavigatedRef = useRef(false);
+  useEffect(() => {
+    if (!isPublicMode) {
+      setCurrentConversationId(id);
+      isFirstMessageSentRef.current = false;
+      hasNavigatedRef.current = false;
+    }
+  }, [id, isPublicMode]);
+  const { conversation, isLoading: isLoadingConversation } = useConversation(
+    id,
+    { enabled: !!id && !isPublicMode }
+  );
+  const { conversations } = useConversations({ enabled: !isPublicMode });
+  const conversationIdRef = useRef(
+    isPublicMode ? void 0 : id
+  );
+  useEffect(() => {
+    if (!isPublicMode) {
+      conversationIdRef.current = currentConversationId;
+    }
+  }, [currentConversationId, isPublicMode]);
+  const editMessagesRef = useRef(null);
+  const transport = useMemo(
+    () => new DefaultChatTransport({
+      api: apiPath,
+      // In public mode, don't send conversationId
+      body: isPublicMode ? void 0 : () => ({ conversationId: conversationIdRef.current }),
+      // Handle edit operations by using truncated messages from the ref
+      prepareSendMessagesRequest: ({ messages: hookMessages }) => {
+        if (editMessagesRef.current !== null) {
+          const newUserMessage = hookMessages[hookMessages.length - 1];
+          const messagesToSend = [...editMessagesRef.current];
+          if (newUserMessage) {
+            messagesToSend.push(newUserMessage);
+          }
+          editMessagesRef.current = null;
+          return {
+            body: {
+              messages: messagesToSend,
+              conversationId: conversationIdRef.current
+            }
+          };
+        }
+        return {
+          body: {
+            messages: hookMessages,
+            conversationId: conversationIdRef.current
+          }
+        };
+      }
+    }),
+    [apiPath, isPublicMode]
+  );
+  const { messages, sendMessage, status, error, setMessages, regenerate } = useChat({
+    transport,
+    onError: (err) => {
+      console.error("useChat onError:", err);
+    },
+    onFinish: async () => {
+      if (isPublicMode) return;
+      await queryClient.invalidateQueries({
+        queryKey: conversationsListQueryKey
+      });
+      if (isFirstMessageSentRef.current && !id && !hasNavigatedRef.current) {
+        hasNavigatedRef.current = true;
+        await queryClient.refetchQueries({
+          queryKey: conversationsListQueryKey
+        });
+        const cachedConversations = queryClient.getQueryData(conversationsListQueryKey);
+        if (cachedConversations && cachedConversations.length > 0) {
+          const newConversation = cachedConversations[0];
+          if (newConversation) {
+            setCurrentConversationId(newConversation.id);
+            conversationIdRef.current = newConversation.id;
+            const newUrl = `${basePath}/chat/${newConversation.id}`;
+            if (typeof window !== "undefined") {
+              window.history.replaceState(
+                { ...window.history.state },
+                "",
+                newUrl
+              );
+            }
+          }
+        }
+      }
+    }
+  });
+  useEffect(() => {
+    if (conversation?.messages && conversation.messages.length > 0 && messages.length === 0) {
+      const uiMessages = conversation.messages.filter((m) => m.role !== "data").map((m) => {
+        let parts;
+        try {
+          const parsed = JSON.parse(m.content);
+          if (Array.isArray(parsed)) {
+            parts = parsed;
+          } else {
+            parts = [{ type: "text", text: m.content }];
+          }
+        } catch {
+          parts = [{ type: "text", text: m.content }];
+        }
+        return {
+          id: m.id,
+          role: m.role,
+          parts
+        };
+      });
+      setMessages(uiMessages);
+    }
+  }, [conversation, messages.length, setMessages]);
+  useEffect(() => {
+    if (initialMessages && initialMessages.length > 0 && messages.length === 0) {
+      setMessages(initialMessages);
+    }
+  }, [initialMessages, setMessages, messages.length]);
+  const [input, setInput] = useState("");
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      const scrollElement = scrollRef.current.querySelector(
+        "[data-radix-scroll-area-viewport]"
+      );
+      if (scrollElement) {
+        scrollElement.scrollTop = scrollElement.scrollHeight;
+      }
+    }
+  }, [messages]);
+  const handleInputChange = (e) => {
+    setInput(e.target.value);
+  };
+  const handleSubmit = async (e, files) => {
+    e.preventDefault();
+    const text = input.trim();
+    if (!text && (!files || files.length === 0)) return;
+    if (!isPublicMode && !id && messages.length === 0) {
+      isFirstMessageSentRef.current = true;
+    }
+    const savedInput = input;
+    const savedFiles = files ? [...files] : [];
+    setInput("");
+    setAttachedFiles([]);
+    try {
+      if (files && files.length > 0) {
+        const fileUIParts = files.map((file) => ({
+          type: "file",
+          mediaType: file.mediaType,
+          url: file.url,
+          filename: file.filename
+        }));
+        await sendMessage({
+          text: text || "",
+          // AI SDK requires text, even if empty
+          files: fileUIParts
+        });
+      } else {
+        await sendMessage({ text });
+      }
+    } catch (error2) {
+      setInput(savedInput);
+      setAttachedFiles(savedFiles);
+      console.error("Error sending message:", error2);
+    }
+  };
+  const isLoading = status === "streaming" || status === "submitted";
+  const handleRetry = useCallback(() => {
+    regenerate();
+  }, [regenerate]);
+  const [pendingEdit, setPendingEdit] = useState(null);
+  useEffect(() => {
+    if (pendingEdit && messages.length === pendingEdit.expectedLength) {
+      const textToSend = pendingEdit.text;
+      setPendingEdit(null);
+      sendMessage({ text: textToSend });
+    }
+  }, [messages.length, pendingEdit, sendMessage]);
+  const handleEditMessage = useCallback(
+    (messageId, newText) => {
+      const messageIndex = messages.findIndex((m) => m.id === messageId);
+      if (messageIndex === -1) return;
+      const messageToEdit = messages[messageIndex];
+      if (!messageToEdit || messageToEdit.role !== "user") return;
+      const truncatedMessages = messages.slice(0, messageIndex);
+      editMessagesRef.current = truncatedMessages;
+      setPendingEdit({ text: newText, expectedLength: messageIndex });
+      setMessages(truncatedMessages);
+    },
+    [messages, setMessages]
+  );
+  const isWidget = variant === "widget";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col h-full w-full bg-background",
+          isWidget && "rounded-xl",
+          className
+        ),
+        "data-testid": "chat-interface",
+        children: /* @__PURE__ */ jsx(ScrollArea, { ref: scrollRef, className: "flex-1 h-full", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col p-4",
+              isWidget ? "max-w-full" : "max-w-3xl mx-auto w-full"
+            ),
+            children: [
+              messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: localization.CHAT_EMPTY_STATE }) }) : messages.map((m, index) => /* @__PURE__ */ jsx(
+                ChatMessage,
+                {
+                  message: m,
+                  isStreaming: status === "streaming" && m.id === messages[messages.length - 1]?.id && m.role === "assistant",
+                  variant: isWidget ? "compact" : "default",
+                  onRetry: (
+                    // Only show retry on the last assistant message
+                    m.role === "assistant" && index === messages.length - 1 ? handleRetry : void 0
+                  ),
+                  onEdit: (
+                    // Allow editing user messages
+                    m.role === "user" ? (newText) => handleEditMessage(m.id, newText) : void 0
+                  ),
+                  isRetrying: isLoading && m.role === "assistant"
+                },
+                m.id || `msg-${index}`
+              )),
+              isLoading && messages[messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-muted-foreground text-sm py-4", children: /* @__PURE__ */ jsx("div", { className: "animate-pulse", children: localization.CHAT_LOADING }) }),
+              error && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-destructive text-sm py-4 px-3 bg-destructive/10 rounded-md", children: /* @__PURE__ */ jsx("span", { children: localization.CHAT_ERROR }) })
+            ]
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "border-t bg-background p-4",
+          isWidget ? "px-3 py-3" : "px-4"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: cn(!isWidget && "max-w-3xl mx-auto"), children: [
+          /* @__PURE__ */ jsx(
+            ChatInput,
+            {
+              input,
+              handleInputChange,
+              handleSubmit,
+              isLoading,
+              placeholder: localization.CHAT_PLACEHOLDER,
+              variant: isWidget ? "compact" : "default",
+              onFilesAttached: setAttachedFiles,
+              attachedFiles
+            }
+          ),
+          showAttribution && /* @__PURE__ */ jsx(BetterStackAttribution, {})
+        ] })
+      }
+    )
+  ] });
+}
+
+export { ChatInterface };