@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/file-tree.js

@@ -0,0 +1,212 @@
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ChevronRightIcon, FolderOpenIcon, FolderIcon, FileIcon } from 'lucide-react';
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var noop = () => {
+};
+var FileTreeContext = createContext({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: /* @__PURE__ */ new Set(),
+  togglePath: noop
+});
+var FileTree = ({
+  expanded: controlledExpanded,
+  defaultExpanded = /* @__PURE__ */ new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}) => {
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+  const togglePath = useCallback(
+    (path) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+  const contextValue = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ jsx(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border bg-background font-mono text-sm",
+        className
+      ),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "p-2", children })
+    }
+  ) });
+};
+var FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("shrink-0", className), ...props, children });
+var FileTreeName = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("truncate", className), ...props, children });
+var FileTreeFolderContext = createContext({
+  isExpanded: false,
+  name: "",
+  path: ""
+});
+var FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const folderContextValue = useMemo(
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+  return /* @__PURE__ */ jsx(FileTreeFolderContext.Provider, { value: folderContextValue, children: /* @__PURE__ */ jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("", className),
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                CollapsibleTrigger,
+                {
+                  render: () => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(
+                        ChevronRightIcon,
+                        {
+                          className: cn(
+                            "size-4 shrink-0 text-muted-foreground transition-transform",
+                            isExpanded && "rotate-90"
+                          )
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left",
+                  onClick: handleSelect,
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4 text-blue-500" }) }),
+                    /* @__PURE__ */ jsx(FileTreeName, { children: name })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-4 border-l pl-2", children }) })
+      ]
+    }
+  ) }) });
+};
+var FileTreeFileContext = createContext({
+  name: "",
+  path: ""
+});
+var FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+  return /* @__PURE__ */ jsx(FileTreeFileContext.Provider, { value: fileContextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+        isSelected && "bg-muted",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(FileTreeName, { children: name })
+      ] })
+    }
+  ) });
+};
+var stopPropagation = (e) => e.stopPropagation();
+var FileTreeActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("ml-auto flex items-center gap-1", className),
+    onClick: stopPropagation,
+    onKeyDown: stopPropagation,
+    role: "group",
+    ...props,
+    children
+  }
+);
+
+export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Experimental_GeneratedImage } from 'ai';
+
+type ImageProps = Experimental_GeneratedImage & {
+    className?: string;
+    alt?: string;
+};
+declare const Image: ({ base64, uint8Array: _uint8Array, mediaType, ...props }: ImageProps) => react_jsx_runtime.JSX.Element;
+
+export { Image, type ImageProps };

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

@@ -0,0 +1,23 @@
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ai-elements/image.tsx
+var Image = ({
+  base64,
+  uint8Array: _uint8Array,
+  mediaType,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ...props,
+    alt: props.alt,
+    className: cn(
+      "h-auto max-w-full overflow-hidden rounded-md",
+      props.className
+    ),
+    src: `data:${mediaType};base64,${base64}`
+  }
+);
+
+export { Image };

package/dist/components/ai-elements/inline-citation.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Carousel } from '@chatsdk-dev/ui/components/carousel';
+import { HoverCard } from '@chatsdk-dev/ui/components/hover-card';
+import { ComponentProps } from 'react';
+
+type InlineCitationProps = ComponentProps<"span">;
+declare const InlineCitation: ({ className, ...props }: InlineCitationProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationTextProps = ComponentProps<"span">;
+declare const InlineCitationText: ({ className, ...props }: InlineCitationTextProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+declare const InlineCitationCard: (props: InlineCitationCardProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+    sources: string[];
+};
+declare const InlineCitationCardTrigger: ({ sources, className, ...props }: InlineCitationCardTriggerProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCardBodyProps = ComponentProps<"div">;
+declare const InlineCitationCardBody: ({ className, ...props }: InlineCitationCardBodyProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+declare const InlineCitationCarousel: ({ className, children, ...props }: InlineCitationCarouselProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselContentProps = ComponentProps<"div">;
+declare const InlineCitationCarouselContent: (props: InlineCitationCarouselContentProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselItemProps = ComponentProps<"div">;
+declare const InlineCitationCarouselItem: ({ className, ...props }: InlineCitationCarouselItemProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
+declare const InlineCitationCarouselHeader: ({ className, ...props }: InlineCitationCarouselHeaderProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselIndexProps = ComponentProps<"div">;
+declare const InlineCitationCarouselIndex: ({ children, className, ...props }: InlineCitationCarouselIndexProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselPrevProps = ComponentProps<"button">;
+declare const InlineCitationCarouselPrev: ({ className, ...props }: InlineCitationCarouselPrevProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationCarouselNextProps = ComponentProps<"button">;
+declare const InlineCitationCarouselNext: ({ className, ...props }: InlineCitationCarouselNextProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationSourceProps = ComponentProps<"div"> & {
+    title?: string;
+    url?: string;
+    description?: string;
+};
+declare const InlineCitationSource: ({ title, url, description, className, children, ...props }: InlineCitationSourceProps) => react_jsx_runtime.JSX.Element;
+type InlineCitationQuoteProps = ComponentProps<"blockquote">;
+declare const InlineCitationQuote: ({ children, className, ...props }: InlineCitationQuoteProps) => react_jsx_runtime.JSX.Element;
+
+export { InlineCitation, InlineCitationCard, InlineCitationCardBody, type InlineCitationCardBodyProps, type InlineCitationCardProps, InlineCitationCardTrigger, type InlineCitationCardTriggerProps, InlineCitationCarousel, InlineCitationCarouselContent, type InlineCitationCarouselContentProps, InlineCitationCarouselHeader, type InlineCitationCarouselHeaderProps, InlineCitationCarouselIndex, type InlineCitationCarouselIndexProps, InlineCitationCarouselItem, type InlineCitationCarouselItemProps, InlineCitationCarouselNext, type InlineCitationCarouselNextProps, InlineCitationCarouselPrev, type InlineCitationCarouselPrevProps, type InlineCitationCarouselProps, type InlineCitationProps, InlineCitationQuote, type InlineCitationQuoteProps, InlineCitationSource, type InlineCitationSourceProps, InlineCitationText, type InlineCitationTextProps };

package/dist/components/ai-elements/inline-citation.js

@@ -0,0 +1,203 @@
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Carousel, CarouselContent, CarouselItem } from '@chatsdk-dev/ui/components/carousel';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@chatsdk-dev/ui/components/hover-card';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
+import { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var InlineCitation = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("group inline items-center gap-1", className),
+    ...props
+  }
+);
+var InlineCitationText = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("transition-colors group-hover:bg-accent", className),
+    ...props
+  }
+);
+var InlineCitationCard = (props) => /* @__PURE__ */ jsx(HoverCard, { ...props });
+var InlineCitationCardTrigger = ({
+  sources,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  HoverCardTrigger,
+  {
+    render: () => /* @__PURE__ */ jsx(
+      Badge,
+      {
+        className: cn("ml-1 rounded-full", className),
+        variant: "secondary",
+        ...props,
+        children: sources[0] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          new URL(sources[0]).hostname,
+          " ",
+          sources.length > 1 && `+${sources.length - 1}`
+        ] }) : "unknown"
+      }
+    )
+  }
+);
+var InlineCitationCardBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardContent, { className: cn("relative w-80 p-0", className), ...props });
+var CarouselApiContext = createContext(void 0);
+var useCarouselApi = () => {
+  const context = useContext(CarouselApiContext);
+  return context;
+};
+var InlineCitationCarousel = ({
+  className,
+  children,
+  ...props
+}) => {
+  const [api, setApi] = useState();
+  return /* @__PURE__ */ jsx(CarouselApiContext.Provider, { value: api, children: /* @__PURE__ */ jsx(Carousel, { className: cn("w-full", className), setApi, ...props, children }) });
+};
+var InlineCitationCarouselContent = (props) => /* @__PURE__ */ jsx(CarouselContent, { ...props });
+var InlineCitationCarouselItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CarouselItem,
+  {
+    className: cn("w-full space-y-2 p-4 pl-8", className),
+    ...props
+  }
+);
+var InlineCitationCarouselHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
+      className
+    ),
+    ...props
+  }
+);
+var InlineCitationCarouselIndex = ({
+  children,
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+  const syncState = useCallback(() => {
+    if (!api) {
+      return;
+    }
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+  }, [api]);
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    syncState();
+    api.on("select", syncState);
+    return () => {
+      api.off("select", syncState);
+    };
+  }, [api, syncState]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
+        className
+      ),
+      ...props,
+      children: children ?? `${current}/${count}`
+    }
+  );
+};
+var InlineCitationCarouselPrev = ({
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollPrev();
+    }
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Previous",
+      className: cn("shrink-0", className),
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4 text-muted-foreground" })
+    }
+  );
+};
+var InlineCitationCarouselNext = ({
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollNext();
+    }
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Next",
+      className: cn("shrink-0", className),
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4 text-muted-foreground" })
+    }
+  );
+};
+var InlineCitationSource = ({
+  title,
+  url,
+  description,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), ...props, children: [
+  title && /* @__PURE__ */ jsx("h4", { className: "truncate font-medium text-sm leading-tight", children: title }),
+  url && /* @__PURE__ */ jsx("p", { className: "truncate break-all text-muted-foreground text-xs", children: url }),
+  description && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-muted-foreground text-sm leading-relaxed", children: description }),
+  children
+] });
+var InlineCitationQuote = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "blockquote",
+  {
+    className: cn(
+      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationCarouselNext, InlineCitationCarouselPrev, InlineCitationQuote, InlineCitationSource, InlineCitationText };

package/dist/components/ai-elements/jsx-preview.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TProps } from 'react-jsx-parser';
+
+interface JSXPreviewContextValue {
+    jsx: string;
+    processedJsx: string;
+    isStreaming: boolean;
+    error: Error | null;
+    setError: (error: Error | null) => void;
+    setLastGoodJsx: (jsx: string) => void;
+    components: TProps["components"];
+    bindings: TProps["bindings"];
+    onErrorProp?: (error: Error) => void;
+}
+declare const useJSXPreview: () => JSXPreviewContextValue;
+type JSXPreviewProps = ComponentProps<"div"> & {
+    jsx: string;
+    isStreaming?: boolean;
+    components?: TProps["components"];
+    bindings?: TProps["bindings"];
+    onError?: (error: Error) => void;
+};
+declare const JSXPreview: react.MemoExoticComponent<({ jsx, isStreaming, components, bindings, onError, className, children, ...props }: JSXPreviewProps) => react_jsx_runtime.JSX.Element>;
+type JSXPreviewContentProps = Omit<ComponentProps<"div">, "children">;
+declare const JSXPreviewContent: react.MemoExoticComponent<({ className, ...props }: JSXPreviewContentProps) => react_jsx_runtime.JSX.Element>;
+type JSXPreviewErrorProps = ComponentProps<"div"> & {
+    children?: ReactNode | ((error: Error) => ReactNode);
+};
+declare const JSXPreviewError: react.MemoExoticComponent<({ className, children, ...props }: JSXPreviewErrorProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { JSXPreview, JSXPreviewContent, type JSXPreviewContentProps, JSXPreviewError, type JSXPreviewErrorProps, type JSXPreviewProps, useJSXPreview };