@usecrow/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,624 @@
+import { createContext, useRef, useEffect, useMemo, useContext, useState, useCallback } from 'react';
+import { CrowClient } from '@usecrow/client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+var CrowContext = createContext(null);
+function CrowProvider({
+  children,
+  productId,
+  apiUrl,
+  model
+}) {
+  const clientRef = useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = new CrowClient({ productId, apiUrl, model });
+  }
+  const client = clientRef.current;
+  useEffect(() => {
+    return () => {
+      client.destroy();
+    };
+  }, [client]);
+  const value = useMemo(() => ({ client }), [client]);
+  return /* @__PURE__ */ jsx(CrowContext.Provider, { value, children });
+}
+function useCrowClient() {
+  const context = useContext(CrowContext);
+  if (!context) {
+    throw new Error("useCrowClient must be used within a CrowProvider");
+  }
+  return context.client;
+}
+function useCrowClientOptional() {
+  const context = useContext(CrowContext);
+  return context?.client ?? null;
+}
+function useChat({ client, onStreamEvent }) {
+  const [messages, setMessages] = useState(client.messages);
+  const [isLoading, setIsLoading] = useState(client.isLoading);
+  const onStreamEventRef = useRef(onStreamEvent);
+  useEffect(() => {
+    onStreamEventRef.current = onStreamEvent;
+  });
+  useEffect(() => {
+    const unsubMessages = client.onMessages(setMessages);
+    const unsubLoading = client.onLoading(setIsLoading);
+    setMessages(client.messages);
+    setIsLoading(client.isLoading);
+    return () => {
+      unsubMessages();
+      unsubLoading();
+    };
+  }, [client]);
+  const sendMessage = useCallback(
+    async (content) => {
+      for await (const event of client.sendMessage(content)) {
+        onStreamEventRef.current?.(event);
+      }
+    },
+    [client]
+  );
+  const stop = useCallback(() => {
+    client.stop();
+  }, [client]);
+  const clearMessages = useCallback(() => {
+    client.clearMessages();
+  }, [client]);
+  return {
+    messages,
+    isLoading,
+    sendMessage,
+    stop,
+    clearMessages
+  };
+}
+function ChatBubble({ isOpen, onClick, className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      className: clsx(
+        "crow-fixed crow-z-[999999] crow-rounded-full",
+        "crow-w-14 crow-h-14 crow-flex crow-items-center crow-justify-center",
+        "crow-bg-crow-primary hover:crow-bg-crow-primary-dark",
+        "crow-shadow-lg hover:crow-shadow-xl crow-transition-all crow-duration-300",
+        "hover:crow-scale-110",
+        className
+      ),
+      style: {
+        right: "20px",
+        bottom: "20px"
+      },
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      children: isOpen ? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "crow-w-6 crow-h-6 crow-text-white",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M19 9l-7 7-7-7"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "crow-w-6 crow-h-6 crow-text-white",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function WidgetHeader({
+  title = "Chat",
+  onNewChat,
+  onClose,
+  showNewChat = true,
+  showClose = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "crow-flex crow-items-center crow-justify-between crow-px-4 crow-py-3",
+        "crow-border-b crow-border-gray-200 crow-bg-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "crow-font-semibold crow-text-gray-900", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-2", children: [
+          showNewChat && onNewChat && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onNewChat,
+              className: "crow-p-1.5 crow-rounded-lg crow-text-gray-500 hover:crow-bg-gray-100 hover:crow-text-gray-700 crow-transition-colors",
+              "aria-label": "New chat",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "crow-w-5 crow-h-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M12 4v16m8-8H4"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          showClose && onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "crow-p-1.5 crow-rounded-lg crow-text-gray-500 hover:crow-bg-gray-100 hover:crow-text-gray-700 crow-transition-colors",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "crow-w-5 crow-h-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M6 18L18 6M6 6l12 12"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function formatTime(date) {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function MessageBubble({ message, isStreaming = false }) {
+  const isUser = message.role === "user";
+  const isWaiting = !message.content && !isUser;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "crow-flex crow-flex-col",
+        isUser ? "crow-items-end" : "crow-items-start"
+      ),
+      children: [
+        message.thinking && /* @__PURE__ */ jsx("div", { className: "crow-mb-2 crow-text-xs crow-text-gray-500 crow-bg-gray-100 crow-rounded-lg crow-px-3 crow-py-2 crow-max-w-[80%]", children: /* @__PURE__ */ jsxs("details", { open: !message.thinkingComplete, children: [
+          /* @__PURE__ */ jsx("summary", { className: "crow-cursor-pointer crow-font-medium", children: message.thinkingComplete ? "Reasoning" : "Thinking..." }),
+          /* @__PURE__ */ jsx("div", { className: "crow-mt-1 crow-text-gray-600 crow-whitespace-pre-wrap", children: message.thinking })
+        ] }) }),
+        isWaiting && /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1 crow-text-gray-500 crow-text-sm crow-px-3 crow-py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse", children: "\u25CF" }),
+          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse crow-animation-delay-100", children: "\u25CF" }),
+          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse crow-animation-delay-200", children: "\u25CF" })
+        ] }),
+        message.content && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "crow-max-w-[80%] crow-rounded-2xl crow-px-4 crow-py-2 crow-transition-all",
+              isUser ? "crow-bg-crow-primary crow-text-white" : "crow-bg-gray-100 crow-text-gray-900"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "crow-text-sm crow-whitespace-pre-wrap", children: [
+                message.content,
+                isStreaming && /* @__PURE__ */ jsx("span", { className: "crow-inline-block crow-w-1 crow-h-4 crow-ml-0.5 crow-bg-current crow-animate-pulse" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "crow-text-xs crow-opacity-60 crow-mt-1", children: formatTime(message.timestamp) })
+            ]
+          }
+        ),
+        message.citations && message.citations.length > 0 && /* @__PURE__ */ jsx("div", { className: "crow-mt-1 crow-flex crow-flex-wrap crow-gap-1", children: message.citations.map((citation, idx) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crow-text-xs crow-bg-blue-100 crow-text-blue-700 crow-px-2 crow-py-0.5 crow-rounded",
+            children: citation.filename
+          },
+          idx
+        )) })
+      ]
+    }
+  );
+}
+function MessageList({ messages, isLoading = false, className }) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [messages]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `crow-flex-1 crow-overflow-y-auto crow-px-4 crow-py-4 crow-space-y-3 ${className || ""}`,
+      children: messages.map((message, index) => {
+        const isLastBotMessage = message.role === "assistant" && index === messages.length - 1;
+        return /* @__PURE__ */ jsx(
+          MessageBubble,
+          {
+            message,
+            isStreaming: isLastBotMessage && isLoading
+          },
+          message.id
+        );
+      })
+    }
+  );
+}
+function PromptInput({
+  onSend,
+  onStop,
+  isLoading = false,
+  placeholder = "Type your message...",
+  disabled = false,
+  className
+}) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }
+  }, [value]);
+  const handleSubmit = useCallback(() => {
+    if (value.trim() && !isLoading) {
+      onSend(value.trim());
+      setValue("");
+    }
+  }, [value, isLoading, onSend]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const hasContent = value.trim().length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "crow-flex crow-items-end crow-gap-2 crow-p-3 crow-border-t crow-border-gray-200 crow-bg-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled: disabled || isLoading,
+            rows: 1,
+            className: clsx(
+              "crow-flex-1 crow-resize-none crow-border crow-border-gray-300 crow-rounded-xl crow-px-4 crow-py-2",
+              "crow-text-sm crow-text-gray-900 crow-placeholder-gray-500",
+              "focus:crow-outline-none focus:crow-ring-2 focus:crow-ring-crow-primary focus:crow-border-transparent",
+              "disabled:crow-bg-gray-50 disabled:crow-cursor-not-allowed"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: isLoading ? onStop : handleSubmit,
+            disabled: !isLoading && !hasContent,
+            className: clsx(
+              "crow-flex-shrink-0 crow-w-10 crow-h-10 crow-rounded-full crow-flex crow-items-center crow-justify-center",
+              "crow-transition-all crow-duration-200",
+              isLoading ? "crow-bg-red-500 hover:crow-bg-red-600 crow-text-white" : hasContent ? "crow-bg-crow-primary hover:crow-bg-crow-primary-dark crow-text-white" : "crow-bg-gray-200 crow-text-gray-400 crow-cursor-not-allowed"
+            ),
+            "aria-label": isLoading ? "Stop generation" : "Send message",
+            children: isLoading ? /* @__PURE__ */ jsx("svg", { className: "crow-w-4 crow-h-4", fill: "currentColor", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "1" }) }) : /* @__PURE__ */ jsx("svg", { className: "crow-w-4 crow-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function CrowWidget({
+  productId,
+  apiUrl,
+  model,
+  agentName = "Assistant",
+  defaultCollapsed = true,
+  onIdentify,
+  tools,
+  className,
+  zIndex = 999999
+}) {
+  const contextClient = useCrowClientOptional();
+  const standaloneClientRef = useRef(null);
+  if (!contextClient && !standaloneClientRef.current) {
+    standaloneClientRef.current = new CrowClient({ productId, apiUrl, model });
+  }
+  const client = contextClient || standaloneClientRef.current;
+  useEffect(() => {
+    return () => {
+      if (standaloneClientRef.current) {
+        standaloneClientRef.current.destroy();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (tools) {
+      client.registerTools(tools);
+    }
+  }, [client, tools]);
+  useEffect(() => {
+    if (onIdentify) {
+      onIdentify((options) => client.identify(options));
+    }
+  }, [client, onIdentify]);
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const { messages, isLoading, sendMessage, stop, clearMessages } = useChat({
+    client
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ChatBubble, { isOpen: !isCollapsed, onClick: () => setIsCollapsed(!isCollapsed) }),
+    !isCollapsed && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "crow-fixed crow-flex crow-flex-col",
+          "crow-bg-white crow-rounded-2xl crow-shadow-2xl",
+          "crow-border crow-border-gray-200",
+          "crow-overflow-hidden crow-animate-fade-in",
+          className
+        ),
+        style: {
+          zIndex,
+          right: "20px",
+          bottom: "90px",
+          width: "380px",
+          height: "550px",
+          maxHeight: "calc(100vh - 120px)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            WidgetHeader,
+            {
+              title: agentName,
+              onNewChat: clearMessages,
+              showNewChat: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MessageList,
+            {
+              messages,
+              isLoading,
+              className: "crow-flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PromptInput,
+            {
+              onSend: sendMessage,
+              onStop: stop,
+              isLoading,
+              placeholder: "Type your message..."
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function CrowCopilot({
+  productId,
+  apiUrl,
+  model,
+  title = "Copilot",
+  position = "right",
+  width = 400,
+  showClose = false,
+  onClose,
+  onIdentify,
+  tools,
+  className
+}) {
+  const contextClient = useCrowClientOptional();
+  const standaloneClientRef = useRef(null);
+  if (!contextClient && !standaloneClientRef.current && productId) {
+    standaloneClientRef.current = new CrowClient({ productId, apiUrl, model });
+  }
+  const client = contextClient || standaloneClientRef.current;
+  if (!client) {
+    console.error(
+      "[CrowCopilot] No client available. Either wrap in CrowProvider or provide productId prop."
+    );
+    return null;
+  }
+  useEffect(() => {
+    return () => {
+      if (standaloneClientRef.current) {
+        standaloneClientRef.current.destroy();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (tools) {
+      client.registerTools(tools);
+    }
+  }, [client, tools]);
+  useEffect(() => {
+    if (onIdentify) {
+      onIdentify((options) => client.identify(options));
+    }
+  }, [client, onIdentify]);
+  const { messages, isLoading, sendMessage, stop, clearMessages } = useChat({
+    client
+  });
+  const widthStyle = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "crow-flex crow-flex-col crow-h-full",
+        "crow-bg-white crow-border-gray-200",
+        position === "left" ? "crow-border-r" : "crow-border-l",
+        className
+      ),
+      style: { width: widthStyle },
+      children: [
+        /* @__PURE__ */ jsx(
+          WidgetHeader,
+          {
+            title,
+            onNewChat: clearMessages,
+            onClose,
+            showNewChat: true,
+            showClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageList,
+          {
+            messages,
+            isLoading,
+            className: "crow-flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PromptInput,
+          {
+            onSend: sendMessage,
+            onStop: stop,
+            isLoading,
+            placeholder: "Ask anything..."
+          }
+        )
+      ]
+    }
+  );
+}
+function useIdentity({ client }) {
+  const [isIdentified, setIsIdentified] = useState(client.isIdentified());
+  const [isVerified, setIsVerified] = useState(client.isVerified());
+  useEffect(() => {
+    client.on({
+      onVerificationStatus: (verified) => {
+        setIsVerified(verified);
+      }
+    });
+    setIsIdentified(client.isIdentified());
+    setIsVerified(client.isVerified());
+  }, [client]);
+  const identify = useCallback(
+    (options) => {
+      client.identify(options);
+      setIsIdentified(true);
+    },
+    [client]
+  );
+  const resetUser = useCallback(() => {
+    client.resetUser();
+    setIsIdentified(false);
+    setIsVerified(false);
+  }, [client]);
+  return {
+    isIdentified,
+    isVerified,
+    identify,
+    resetUser
+  };
+}
+function useConversations({
+  client
+}) {
+  const [conversations, setConversations] = useState([]);
+  const [isLoadingConversations, setIsLoadingConversations] = useState(false);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const loadConversations = useCallback(async () => {
+    setIsLoadingConversations(true);
+    try {
+      const convs = await client.getConversations();
+      setConversations(convs);
+    } finally {
+      setIsLoadingConversations(false);
+    }
+  }, [client]);
+  const loadHistory = useCallback(
+    async (conversationId) => {
+      setIsLoadingHistory(true);
+      try {
+        return await client.loadHistory(conversationId);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    },
+    [client]
+  );
+  const switchConversation = useCallback(
+    async (conversationId) => {
+      setIsLoadingHistory(true);
+      try {
+        await client.switchConversation(conversationId);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    },
+    [client]
+  );
+  const startNewConversation = useCallback(() => {
+    client.clearMessages();
+  }, [client]);
+  return {
+    conversations,
+    isLoadingConversations,
+    isLoadingHistory,
+    currentConversationId: client.conversationId,
+    loadConversations,
+    loadHistory,
+    switchConversation,
+    startNewConversation
+  };
+}
+
+export { ChatBubble, CrowCopilot, CrowProvider, CrowWidget, MessageBubble, MessageList, PromptInput, WidgetHeader, useChat, useConversations, useCrowClient, useCrowClientOptional, useIdentity };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map