@kopexa/assistant 0.0.1

package/dist/index.js

@@ -0,0 +1,519 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Conversation: () => Conversation,
+  ConversationContent: () => ConversationContent,
+  ConversationEmptyState: () => ConversationEmptyState,
+  ConversationScrollButton: () => ConversationScrollButton,
+  Message: () => Message,
+  MessageAction: () => MessageAction,
+  MessageActions: () => MessageActions,
+  MessageBranch: () => MessageBranch,
+  MessageBranchContent: () => MessageBranchContent,
+  MessageBranchNext: () => MessageBranchNext,
+  MessageBranchPage: () => MessageBranchPage,
+  MessageBranchPrevious: () => MessageBranchPrevious,
+  MessageBranchSelector: () => MessageBranchSelector,
+  MessageContent: () => MessageContent,
+  MessageResponse: () => MessageResponse,
+  MessageToolbar: () => MessageToolbar,
+  PromptInput: () => PromptInput
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/conversation.tsx
+var import_button = require("@kopexa/button");
+var import_icons = require("@kopexa/icons");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+var import_use_stick_to_bottom = require("use-stick-to-bottom");
+var import_jsx_runtime = require("react/jsx-runtime");
+var styles = (0, import_theme.conversation)();
+function Conversation({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_use_stick_to_bottom.StickToBottom,
+    {
+      className: (0, import_shared_utils.cn)(styles.root(), className),
+      initial: "smooth",
+      resize: "smooth",
+      role: "log",
+      "data-slot": "conversation",
+      ...props
+    }
+  );
+}
+Conversation.displayName = "Conversation";
+function ConversationContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_use_stick_to_bottom.StickToBottom.Content,
+    {
+      className: (0, import_shared_utils.cn)(styles.content(), className),
+      "data-slot": "conversation-content",
+      ...props
+    }
+  );
+}
+ConversationContent.displayName = "ConversationContent";
+function ConversationEmptyState({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils.cn)(styles.emptyState(), className),
+      "data-slot": "conversation-empty-state",
+      ...props,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.emptyStateIcon(), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: styles.emptyStateTitle(), children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: styles.emptyStateDescription(), children: description })
+        ] })
+      ] })
+    }
+  );
+}
+ConversationEmptyState.displayName = "ConversationEmptyState";
+function ConversationScrollButton({
+  className,
+  ...props
+}) {
+  const { isAtBottom, scrollToBottom } = (0, import_use_stick_to_bottom.useStickToBottomContext)();
+  const handleScrollToBottom = (0, import_react.useCallback)(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      className: (0, import_shared_utils.cn)(styles.scrollButton(), className),
+      onClick: handleScrollToBottom,
+      isIconOnly: true,
+      type: "button",
+      variant: "outline",
+      "data-slot": "conversation-scroll-button",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowDown, { className: "size-4" })
+    }
+  );
+}
+ConversationScrollButton.displayName = "ConversationScrollButton";
+
+// src/message.tsx
+var import_button2 = require("@kopexa/button");
+var import_icons2 = require("@kopexa/icons");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_tooltip = require("@kopexa/tooltip");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var styles2 = (0, import_theme2.message)();
+function Message({ className, from, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.root({ from }), className),
+      "data-slot": "message",
+      "data-from": from,
+      ...props
+    }
+  );
+}
+Message.displayName = "Message";
+function MessageContent({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.content(), className),
+      "data-slot": "message-content",
+      ...props,
+      children
+    }
+  );
+}
+MessageContent.displayName = "MessageContent";
+function MessageActions({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.actions(), className),
+      "data-slot": "message-actions",
+      ...props,
+      children
+    }
+  );
+}
+MessageActions.displayName = "MessageActions";
+function MessageAction({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "sm",
+  ...props
+}) {
+  var _a;
+  const ariaLabel = (_a = label != null ? label : tooltip) != null ? _a : "";
+  const button = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_button2.IconButton,
+    {
+      size,
+      type: "button",
+      variant,
+      "aria-label": ariaLabel,
+      ...props,
+      children
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip, { content: tooltip, children: button });
+  }
+  return button;
+}
+MessageAction.displayName = "MessageAction";
+function MessageToolbar({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.toolbar(), className),
+      "data-slot": "message-toolbar",
+      ...props,
+      children
+    }
+  );
+}
+MessageToolbar.displayName = "MessageToolbar";
+var MessageBranchContext = (0, import_react2.createContext)(
+  null
+);
+function useMessageBranch() {
+  const context = (0, import_react2.useContext)(MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+  return context;
+}
+function MessageBranch({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  children,
+  ...props
+}) {
+  const [currentBranch, setCurrentBranch] = (0, import_react2.useState)(defaultBranch);
+  const [branches, setBranches] = (0, import_react2.useState)([]);
+  const handleBranchChange = (0, import_react2.useCallback)(
+    (newBranch) => {
+      setCurrentBranch(newBranch);
+      onBranchChange == null ? void 0 : onBranchChange(newBranch);
+    },
+    [onBranchChange]
+  );
+  const goToPrevious = (0, import_react2.useCallback)(() => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const goToNext = (0, import_react2.useCallback)(() => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const contextValue = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.branchRoot(), className),
+      "data-slot": "message-branch",
+      ...props,
+      children
+    }
+  ) });
+}
+MessageBranch.displayName = "MessageBranch";
+function MessageBranchContent({
+  children,
+  ...props
+}) {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+  (0, import_react2.useEffect)(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: childrenArray.map((branch, index) => {
+    var _a;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_shared_utils2.cn)(
+          styles2.branchContent(),
+          index === currentBranch ? "block" : "hidden"
+        ),
+        "data-slot": "message-branch-content",
+        ...props,
+        children: branch
+      },
+      (_a = branch.key) != null ? _a : index
+    );
+  }) });
+}
+MessageBranchContent.displayName = "MessageBranchContent";
+function MessageBranchSelector({
+  className,
+  children,
+  ...props
+}) {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.branchSelector(), className),
+      "data-slot": "message-branch-selector",
+      ...props,
+      children
+    }
+  );
+}
+MessageBranchSelector.displayName = "MessageBranchSelector";
+function MessageBranchPrevious({
+  children,
+  ...props
+}) {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_button2.IconButton,
+    {
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.ChevronLeftIcon, { className: "size-4" })
+    }
+  );
+}
+MessageBranchPrevious.displayName = "MessageBranchPrevious";
+function MessageBranchNext({
+  children,
+  ...props
+}) {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_button2.IconButton,
+    {
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.ChevronRightIcon, { className: "size-4" })
+    }
+  );
+}
+MessageBranchNext.displayName = "MessageBranchNext";
+function MessageBranchPage({
+  className,
+  ...props
+}) {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      className: (0, import_shared_utils2.cn)(styles2.branchPage(), className),
+      "data-slot": "message-branch-page",
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+}
+MessageBranchPage.displayName = "MessageBranchPage";
+var MessageResponse = (0, import_react2.memo)(
+  ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_shared_utils2.cn)(
+        "size-full prose prose-sm dark:prose-invert max-w-none",
+        "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      "data-slot": "message-response",
+      ...props,
+      children
+    }
+  )
+);
+MessageResponse.displayName = "MessageResponse";
+
+// src/prompt-input.tsx
+var import_button3 = require("@kopexa/button");
+var import_icons3 = require("@kopexa/icons");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme3 = require("@kopexa/theme");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var styles3 = (0, import_theme3.promptInput)();
+var PromptInput = (0, import_react3.forwardRef)(
+  ({
+    className,
+    placeholder = "Type a message...",
+    value,
+    onValueChange,
+    onSubmit,
+    disabled,
+    isLoading,
+    submitLabel = "Send message",
+    ...props
+  }, ref) => {
+    const textareaRef = (0, import_react3.useRef)(null);
+    const handleSubmit = (0, import_react3.useCallback)(
+      (e) => {
+        e.preventDefault();
+        const trimmedValue = value == null ? void 0 : value.trim();
+        if (trimmedValue && !disabled && !isLoading) {
+          onSubmit == null ? void 0 : onSubmit(trimmedValue);
+        }
+      },
+      [value, disabled, isLoading, onSubmit]
+    );
+    const handleKeyDown = (0, import_react3.useCallback)(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          const trimmedValue = value == null ? void 0 : value.trim();
+          if (trimmedValue && !disabled && !isLoading) {
+            onSubmit == null ? void 0 : onSubmit(trimmedValue);
+          }
+        }
+      },
+      [value, disabled, isLoading, onSubmit]
+    );
+    const handleTextareaChange = (0, import_react3.useCallback)(
+      (e) => {
+        onValueChange == null ? void 0 : onValueChange(e.target.value);
+        const textarea = e.target;
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      },
+      [onValueChange]
+    );
+    const canSubmit = !!(value == null ? void 0 : value.trim()) && !disabled && !isLoading;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_shared_utils3.cn)(styles3.root(), className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "form",
+      {
+        ref,
+        className: styles3.form(),
+        onSubmit: handleSubmit,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: styles3.textarea(),
+              placeholder,
+              value,
+              onChange: handleTextareaChange,
+              onKeyDown: handleKeyDown,
+              disabled: disabled || isLoading,
+              rows: 1,
+              "aria-label": placeholder
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles3.actions(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_button3.Button,
+            {
+              type: "submit",
+              isIconOnly: true,
+              disabled: !canSubmit,
+              isLoading,
+              className: styles3.submitButton(),
+              "aria-label": submitLabel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons3.ArrowUp, { className: "size-4" })
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+PromptInput.displayName = "PromptInput";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+  MessageToolbar,
+  PromptInput
+});

package/dist/index.mjs

@@ -0,0 +1,43 @@
+"use client";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton
+} from "./chunk-S247BNPZ.mjs";
+import {
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+  MessageToolbar
+} from "./chunk-OLZG7MMU.mjs";
+import {
+  PromptInput
+} from "./chunk-UIXG4SXX.mjs";
+export {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+  MessageToolbar,
+  PromptInput
+};

package/dist/message.d.mts

@@ -0,0 +1,97 @@
+import * as react from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconButton } from '@kopexa/button';
+
+/**
+ * Role of the message sender
+ */
+type MessageRole = "user" | "assistant" | "system";
+type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    /** Role of the message sender */
+    from: MessageRole;
+};
+declare function Message({ className, from, ...props }: MessageProps): react_jsx_runtime.JSX.Element;
+declare namespace Message {
+    var displayName: string;
+}
+type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+declare function MessageContent({ children, className, ...props }: MessageContentProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageContent {
+    var displayName: string;
+}
+type MessageActionsProps = ComponentProps<"div">;
+declare function MessageActions({ className, children, ...props }: MessageActionsProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageActions {
+    var displayName: string;
+}
+type MessageActionBaseProps = Omit<ComponentProps<typeof IconButton>, "aria-label" | "tooltip">;
+type MessageActionProps = MessageActionBaseProps & ({
+    /** Tooltip text (also used as accessible label if label not provided) */
+    tooltip: string;
+    /** Accessible label (falls back to tooltip) */
+    label?: string;
+} | {
+    /** Tooltip text */
+    tooltip?: undefined;
+    /** Accessible label (required if tooltip not provided) */
+    label: string;
+});
+declare function MessageAction({ tooltip, children, label, variant, size, ...props }: MessageActionProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageAction {
+    var displayName: string;
+}
+type MessageToolbarProps = ComponentProps<"div">;
+declare function MessageToolbar({ className, children, ...props }: MessageToolbarProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageToolbar {
+    var displayName: string;
+}
+type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+    /** Default branch index */
+    defaultBranch?: number;
+    /** Callback when branch changes */
+    onBranchChange?: (branchIndex: number) => void;
+};
+declare function MessageBranch({ defaultBranch, onBranchChange, className, children, ...props }: MessageBranchProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageBranch {
+    var displayName: string;
+}
+type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+declare function MessageBranchContent({ children, ...props }: MessageBranchContentProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageBranchContent {
+    var displayName: string;
+}
+type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement>;
+declare function MessageBranchSelector({ className, children, ...props }: MessageBranchSelectorProps): react_jsx_runtime.JSX.Element | null;
+declare namespace MessageBranchSelector {
+    var displayName: string;
+}
+type MessageBranchPreviousProps = Omit<ComponentProps<typeof IconButton>, "aria-label">;
+declare function MessageBranchPrevious({ children, ...props }: MessageBranchPreviousProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageBranchPrevious {
+    var displayName: string;
+}
+type MessageBranchNextProps = Omit<ComponentProps<typeof IconButton>, "aria-label">;
+declare function MessageBranchNext({ children, ...props }: MessageBranchNextProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageBranchNext {
+    var displayName: string;
+}
+type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+declare function MessageBranchPage({ className, ...props }: MessageBranchPageProps): react_jsx_runtime.JSX.Element;
+declare namespace MessageBranchPage {
+    var displayName: string;
+}
+type MessageResponseProps = HTMLAttributes<HTMLDivElement> & {
+    /** Markdown content to render */
+    children?: string;
+};
+/**
+ * MessageResponse renders markdown content.
+ *
+ * Note: This is a basic implementation. For full markdown support with
+ * code highlighting, math, and mermaid diagrams, integrate with a
+ * markdown renderer like Streamdown or react-markdown.
+ */
+declare const MessageResponse: react.MemoExoticComponent<({ className, children, ...props }: MessageResponseProps) => react_jsx_runtime.JSX.Element>;
+
+export { Message, MessageAction, type MessageActionProps, MessageActions, type MessageActionsProps, MessageBranch, MessageBranchContent, type MessageBranchContentProps, MessageBranchNext, type MessageBranchNextProps, MessageBranchPage, type MessageBranchPageProps, MessageBranchPrevious, type MessageBranchPreviousProps, type MessageBranchProps, MessageBranchSelector, type MessageBranchSelectorProps, MessageContent, type MessageContentProps, type MessageProps, MessageResponse, type MessageResponseProps, type MessageRole, MessageToolbar, type MessageToolbarProps };