@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/conversation.js

@@ -0,0 +1,119 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ArrowDownIcon, DownloadIcon } from 'lucide-react';
+import { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  StickToBottom,
+  {
+    className: cn("relative flex-1 overflow-y-hidden", className),
+    initial: "smooth",
+    resize: "smooth",
+    role: "log",
+    ...props
+  }
+);
+var ConversationContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  StickToBottom.Content,
+  {
+    className: cn("flex flex-col gap-8 p-4", className),
+    ...props
+  }
+);
+var ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className
+    ),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: description })
+      ] })
+    ] })
+  }
+);
+var ConversationScrollButton = ({
+  className,
+  ...props
+}) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+        className
+      ),
+      onClick: handleScrollToBottom,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+    }
+  );
+};
+var getMessageText = (message) => message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+var defaultFormatMessage = (message) => {
+  const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);
+  return `**${roleLabel}:** ${getMessageText(message)}`;
+};
+var messagesToMarkdown = (messages, formatMessage = defaultFormatMessage) => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+var ConversationDownload = ({
+  messages,
+  filename = "conversation.md",
+  formatMessage = defaultFormatMessage,
+  className,
+  children,
+  ...props
+}) => {
+  const handleDownload = useCallback(() => {
+    const markdown = messagesToMarkdown(messages, formatMessage);
+    const blob = new Blob([markdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  }, [messages, filename, formatMessage]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted",
+        className
+      ),
+      onClick: handleDownload,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(DownloadIcon, { className: "size-4" })
+    }
+  );
+};
+
+export { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationScrollButton, messagesToMarkdown };

package/dist/components/ai-elements/edge.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { EdgeProps } from '@xyflow/react';
+
+declare const Edge: {
+    Animated: ({ id, source, target, markerEnd, style }: EdgeProps) => react_jsx_runtime.JSX.Element | null;
+    Temporary: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: EdgeProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { Edge };

package/dist/components/ai-elements/edge.js

@@ -0,0 +1,111 @@
+import { getSimpleBezierPath, BaseEdge, useInternalNode, getBezierPath, Position } from '@xyflow/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ai-elements/edge.tsx
+var Temporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition
+}) => {
+  const [edgePath] = getSimpleBezierPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      className: "stroke-1 stroke-ring",
+      id,
+      path: edgePath,
+      style: {
+        strokeDasharray: "5, 5"
+      }
+    }
+  );
+};
+var getHandleCoordsByPosition = (node, handlePosition) => {
+  const handleType = handlePosition === Position.Left ? "target" : "source";
+  const handle = node.internals.handleBounds?.[handleType]?.find(
+    (h) => h.position === handlePosition
+  );
+  if (!handle) {
+    return [0, 0];
+  }
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+  switch (handlePosition) {
+    case Position.Left: {
+      offsetX = 0;
+      break;
+    }
+    case Position.Right: {
+      offsetX = handle.width;
+      break;
+    }
+    case Position.Top: {
+      offsetY = 0;
+      break;
+    }
+    case Position.Bottom: {
+      offsetY = handle.height;
+      break;
+    }
+    default: {
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+    }
+  }
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+  return [x, y];
+};
+var getEdgeParams = (source, target) => {
+  const sourcePos = Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+  return {
+    sourcePos,
+    sx,
+    sy,
+    targetPos,
+    tx,
+    ty
+  };
+};
+var Animated = ({ id, source, target, markerEnd, style }) => {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode
+  );
+  const [edgePath] = getBezierPath({
+    sourcePosition: sourcePos,
+    sourceX: sx,
+    sourceY: sy,
+    targetPosition: targetPos,
+    targetX: tx,
+    targetY: ty
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseEdge, { id, markerEnd, path: edgePath, style }),
+    /* @__PURE__ */ jsx("circle", { fill: "var(--primary)", r: "4", children: /* @__PURE__ */ jsx("animateMotion", { dur: "2s", path: edgePath, repeatCount: "indefinite" }) })
+  ] });
+};
+var Edge = {
+  Animated,
+  Temporary
+};
+
+export { Edge };

package/dist/components/ai-elements/environment-variables.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Switch } from '@chatsdk-dev/ui/components/switch';
+import { HTMLAttributes, ComponentProps } from 'react';
+
+type EnvironmentVariablesProps = HTMLAttributes<HTMLDivElement> & {
+    showValues?: boolean;
+    defaultShowValues?: boolean;
+    onShowValuesChange?: (show: boolean) => void;
+};
+declare const EnvironmentVariables: ({ showValues: controlledShowValues, defaultShowValues, onShowValuesChange, className, children, ...props }: EnvironmentVariablesProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const EnvironmentVariablesHeader: ({ className, children, ...props }: EnvironmentVariablesHeaderProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesTitleProps = HTMLAttributes<HTMLHeadingElement>;
+declare const EnvironmentVariablesTitle: ({ className, children, ...props }: EnvironmentVariablesTitleProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesToggleProps = ComponentProps<typeof Switch>;
+declare const EnvironmentVariablesToggle: ({ className, ...props }: EnvironmentVariablesToggleProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesContentProps = HTMLAttributes<HTMLDivElement>;
+declare const EnvironmentVariablesContent: ({ className, children, ...props }: EnvironmentVariablesContentProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableGroupProps = HTMLAttributes<HTMLDivElement>;
+declare const EnvironmentVariableGroup: ({ className, children, ...props }: EnvironmentVariableGroupProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableNameProps = HTMLAttributes<HTMLSpanElement>;
+declare const EnvironmentVariableName: ({ className, children, ...props }: EnvironmentVariableNameProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableValueProps = HTMLAttributes<HTMLSpanElement>;
+declare const EnvironmentVariableValue: ({ className, children, ...props }: EnvironmentVariableValueProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    value: string;
+};
+declare const EnvironmentVariable: ({ name, value, className, children, ...props }: EnvironmentVariableProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+    copyFormat?: "name" | "value" | "export";
+};
+declare const EnvironmentVariableCopyButton: ({ onCopy, onError, timeout, copyFormat, children, className, ...props }: EnvironmentVariableCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableRequiredProps = ComponentProps<typeof Badge>;
+declare const EnvironmentVariableRequired: ({ className, children, ...props }: EnvironmentVariableRequiredProps) => react_jsx_runtime.JSX.Element;
+
+export { EnvironmentVariable, EnvironmentVariableCopyButton, type EnvironmentVariableCopyButtonProps, EnvironmentVariableGroup, type EnvironmentVariableGroupProps, EnvironmentVariableName, type EnvironmentVariableNameProps, type EnvironmentVariableProps, EnvironmentVariableRequired, type EnvironmentVariableRequiredProps, EnvironmentVariableValue, type EnvironmentVariableValueProps, EnvironmentVariables, EnvironmentVariablesContent, type EnvironmentVariablesContentProps, EnvironmentVariablesHeader, type EnvironmentVariablesHeaderProps, type EnvironmentVariablesProps, EnvironmentVariablesTitle, type EnvironmentVariablesTitleProps, EnvironmentVariablesToggle, type EnvironmentVariablesToggleProps };

package/dist/components/ai-elements/environment-variables.js

@@ -0,0 +1,208 @@
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Switch } from '@chatsdk-dev/ui/components/switch';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { EyeIcon, EyeOffIcon, CheckIcon, CopyIcon } from 'lucide-react';
+import { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var noop = () => {
+};
+var EnvironmentVariablesContext = createContext({
+  setShowValues: noop,
+  showValues: false
+});
+var EnvironmentVariables = ({
+  showValues: controlledShowValues,
+  defaultShowValues = false,
+  onShowValuesChange,
+  className,
+  children,
+  ...props
+}) => {
+  const [internalShowValues, setInternalShowValues] = useState(defaultShowValues);
+  const showValues = controlledShowValues ?? internalShowValues;
+  const setShowValues = useCallback(
+    (show) => {
+      setInternalShowValues(show);
+      onShowValuesChange?.(show);
+    },
+    [onShowValuesChange]
+  );
+  const contextValue = useMemo(
+    () => ({ setShowValues, showValues }),
+    [setShowValues, showValues]
+  );
+  return /* @__PURE__ */ jsx(EnvironmentVariablesContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-lg border bg-background", className),
+      ...props,
+      children
+    }
+  ) });
+};
+var EnvironmentVariablesHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b px-4 py-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var EnvironmentVariablesTitle = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("h3", { className: cn("font-medium text-sm", className), ...props, children: children ?? "Environment Variables" });
+var EnvironmentVariablesToggle = ({
+  className,
+  ...props
+}) => {
+  const { showValues, setShowValues } = useContext(EnvironmentVariablesContext);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: showValues ? /* @__PURE__ */ jsx(EyeIcon, { size: 14 }) : /* @__PURE__ */ jsx(EyeOffIcon, { size: 14 }) }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        "aria-label": "Toggle value visibility",
+        checked: showValues,
+        onCheckedChange: setShowValues,
+        ...props
+      }
+    )
+  ] });
+};
+var EnvironmentVariablesContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("divide-y", className), ...props, children });
+var EnvironmentVariableContext = createContext({
+  name: "",
+  value: ""
+});
+var EnvironmentVariableGroup = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
+var EnvironmentVariableName = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { name } = useContext(EnvironmentVariableContext);
+  return /* @__PURE__ */ jsx("span", { className: cn("font-mono text-sm", className), ...props, children: children ?? name });
+};
+var EnvironmentVariableValue = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { value } = useContext(EnvironmentVariableContext);
+  const { showValues } = useContext(EnvironmentVariablesContext);
+  const displayValue = showValues ? value : "\u2022".repeat(Math.min(value.length, 20));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "font-mono text-muted-foreground text-sm",
+        !showValues && "select-none",
+        className
+      ),
+      ...props,
+      children: children ?? displayValue
+    }
+  );
+};
+var EnvironmentVariable = ({
+  name,
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const envVarContextValue = useMemo(() => ({ name, value }), [name, value]);
+  return /* @__PURE__ */ jsx(EnvironmentVariableContext.Provider, { value: envVarContextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 px-4 py-3",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(EnvironmentVariableName, {}) }),
+        /* @__PURE__ */ jsx(EnvironmentVariableValue, {})
+      ] })
+    }
+  ) });
+};
+var EnvironmentVariableCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  copyFormat = "value",
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const { name, value } = useContext(EnvironmentVariableContext);
+  const getTextToCopy = useCallback(() => {
+    const formatMap = {
+      export: () => `export ${name}="${value}"`,
+      name: () => name,
+      value: () => value
+    };
+    return formatMap[copyFormat]();
+  }, [name, value, copyFormat]);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(getTextToCopy());
+      setIsCopied(true);
+      onCopy?.();
+      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [getTextToCopy, onCopy, onError, timeout]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("size-6 shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { size: 12 })
+    }
+  );
+};
+var EnvironmentVariableRequired = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(Badge, { className: cn("text-xs", className), variant: "secondary", ...props, children: children ?? "Required" });
+
+export { EnvironmentVariable, EnvironmentVariableCopyButton, EnvironmentVariableGroup, EnvironmentVariableName, EnvironmentVariableRequired, EnvironmentVariableValue, EnvironmentVariables, EnvironmentVariablesContent, EnvironmentVariablesHeader, EnvironmentVariablesTitle, EnvironmentVariablesToggle };

package/dist/components/ai-elements/file-tree.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selectedPath?: string;
+    onSelect?: (path: string) => void;
+    onExpandedChange?: (expanded: Set<string>) => void;
+};
+declare const FileTree: ({ expanded: controlledExpanded, defaultExpanded, selectedPath, onSelect, onExpandedChange, className, children, ...props }: FileTreeProps) => react_jsx_runtime.JSX.Element;
+type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+declare const FileTreeIcon: ({ className, children, ...props }: FileTreeIconProps) => react_jsx_runtime.JSX.Element;
+type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+declare const FileTreeName: ({ className, children, ...props }: FileTreeNameProps) => react_jsx_runtime.JSX.Element;
+type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+};
+declare const FileTreeFolder: ({ path, name, className, children, ...props }: FileTreeFolderProps) => react_jsx_runtime.JSX.Element;
+type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+    icon?: ReactNode;
+};
+declare const FileTreeFile: ({ path, name, icon, className, children, ...props }: FileTreeFileProps) => react_jsx_runtime.JSX.Element;
+type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const FileTreeActions: ({ className, children, ...props }: FileTreeActionsProps) => react_jsx_runtime.JSX.Element;
+
+export { FileTree, FileTreeActions, type FileTreeActionsProps, FileTreeFile, type FileTreeFileProps, FileTreeFolder, type FileTreeFolderProps, FileTreeIcon, type FileTreeIconProps, FileTreeName, type FileTreeNameProps, type FileTreeProps };