@chatsdk-dev/elements 0.0.1

package/README.md

@@ -0,0 +1,43 @@
+# @chatsdk-dev/elements
+
+AI components for ChatSDK
+
+## Installation
+
+```bash
+npm install @chatsdk/elements
+# or
+pnpm add @chatsdk/elements
+```
+
+## Usage
+
+```tsx
+import { Chat, ChatSDKProvider } from "@chatsdk-dev/elements";
+import "@chatsdk-dev/elements/styles.css";
+
+function App() {
+  return (
+    <MoleculeProvider
+      config={{
+        api: {
+          convexUrl: process.env.NEXT_PUBLIC_CONVEX_CLOUD_URL,
+        },
+      }}
+    >
+      <Chat />
+    </MoleculeProvider>
+  );
+}
+```
+
+## Configuration
+
+The library uses a configuration system that allows you to customize:
+
+- API endpoints
+- Theming and styling
+- Internationalization
+- Context and user settings
+
+Info: In the idea of layered composition and the layers particles (base-ui), atoms (shadcn, coss), molecules (patterns lke composed atoms), elements (sophisticated molecules with advanced functionality like api integration, advanced state management etc.) this `elements` package combines the layers molecules and elements as there are so far only a few.

package/dist/chunk-2LHKM7RD.js

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+
+// src/features/chat/store.ts
+var createChatStore = () => create((set) => ({
+  tab: "chat",
+  conversationType: "new",
+  selectedConversationId: void 0,
+  setTab: (tab) => set({ tab }),
+  setSelectedConversationId: (id) => set({ selectedConversationId: id }),
+  setConversationType: (type) => set({ conversationType: type })
+}));
+var useChatStore = createChatStore();
+
+export { useChatStore };

package/dist/chunk-5UMYP6MD.js

@@ -0,0 +1,10 @@
+// src/features/chat/utils.ts
+function getInitialMessagesFromStrings(messages) {
+  return messages.map((message) => ({
+    id: crypto.randomUUID(),
+    role: "assistant",
+    parts: [{ type: "text", text: message }]
+  }));
+}
+
+export { getInitialMessagesFromStrings };

package/dist/chunk-AP4MG32M.js

@@ -0,0 +1,36 @@
+import { useChatStore } from './chunk-2LHKM7RD.js';
+import { Ellipsis } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { buttonVariants } from '@chatsdk-dev/ui/components/button';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@chatsdk-dev/ui/components/dropdown-menu';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ChatMenu() {
+  const { t } = useTranslation();
+  const { setSelectedConversationId, setTab, setConversationType } = useChatStore();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        className: buttonVariants({ variant: "transparent" }),
+        children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: () => {
+            setConversationType("new");
+            setSelectedConversationId();
+            setTab("chat");
+          },
+          children: t("header.menu.new-conversation-menu-item-label")
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => setTab("history"), children: t("header.menu.history-menu-item-label") })
+    ] })
+  ] });
+}
+
+export { ChatMenu };

package/dist/chunk-CFM57HOS.js

@@ -0,0 +1,358 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@chatsdk-dev/ui/components/select';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { createContext, memo, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { createHighlighter } from 'shiki';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ai-elements/code-block.tsx
+var isItalic = (fontStyle) => fontStyle && fontStyle & 1;
+var isBold = (fontStyle) => fontStyle && fontStyle & 2;
+var isUnderline = (fontStyle) => (
+  // oxlint-disable-next-line eslint(no-bitwise)
+  fontStyle && fontStyle & 4
+);
+var addKeysToTokens = (lines) => lines.map((line, lineIdx) => ({
+  key: `line-${lineIdx}`,
+  tokens: line.map((token, tokenIdx) => ({
+    key: `line-${lineIdx}-${tokenIdx}`,
+    token
+  }))
+}));
+var TokenSpan = ({ token }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]",
+    style: {
+      backgroundColor: token.bgColor,
+      color: token.color,
+      fontStyle: isItalic(token.fontStyle) ? "italic" : void 0,
+      fontWeight: isBold(token.fontStyle) ? "bold" : void 0,
+      textDecoration: isUnderline(token.fontStyle) ? "underline" : void 0,
+      ...token.htmlStyle
+    },
+    children: token.content
+  }
+);
+var LINE_NUMBER_CLASSES = cn(
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:mr-4",
+  "before:text-right",
+  "before:text-muted-foreground/50",
+  "before:font-mono",
+  "before:select-none"
+);
+var LineSpan = ({
+  keyedLine,
+  showLineNumbers
+}) => /* @__PURE__ */ jsx("span", { className: showLineNumbers ? LINE_NUMBER_CLASSES : "block", children: keyedLine.tokens.length === 0 ? "\n" : keyedLine.tokens.map(({ token, key }) => /* @__PURE__ */ jsx(TokenSpan, { token }, key)) });
+var CodeBlockContext = createContext({
+  code: ""
+});
+var highlighterCache = /* @__PURE__ */ new Map();
+var tokensCache = /* @__PURE__ */ new Map();
+var subscribers = /* @__PURE__ */ new Map();
+var getTokensCacheKey = (code, language) => {
+  const start = code.slice(0, 100);
+  const end = code.length > 100 ? code.slice(-100) : "";
+  return `${language}:${code.length}:${start}:${end}`;
+};
+var getHighlighter = (language) => {
+  const cached = highlighterCache.get(language);
+  if (cached) {
+    return cached;
+  }
+  const highlighterPromise = createHighlighter({
+    langs: [language],
+    themes: ["github-light", "github-dark"]
+  });
+  highlighterCache.set(language, highlighterPromise);
+  return highlighterPromise;
+};
+var createRawTokens = (code) => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: code.split("\n").map(
+    (line) => line === "" ? [] : [
+      {
+        color: "inherit",
+        content: line
+      }
+    ]
+  )
+});
+var highlightCode = (code, language, callback) => {
+  const tokensCacheKey = getTokensCacheKey(code, language);
+  const cached = tokensCache.get(tokensCacheKey);
+  if (cached) {
+    return cached;
+  }
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, /* @__PURE__ */ new Set());
+    }
+    subscribers.get(tokensCacheKey)?.add(callback);
+  }
+  getHighlighter(language).then((highlighter) => {
+    const availableLangs = highlighter.getLoadedLanguages();
+    const langToUse = availableLangs.includes(language) ? language : "text";
+    const result = highlighter.codeToTokens(code, {
+      lang: langToUse,
+      themes: {
+        dark: "github-dark",
+        light: "github-light"
+      }
+    });
+    const tokenized = {
+      bg: result.bg ?? "transparent",
+      fg: result.fg ?? "inherit",
+      tokens: result.tokens
+    };
+    tokensCache.set(tokensCacheKey, tokenized);
+    const subs = subscribers.get(tokensCacheKey);
+    if (subs) {
+      for (const sub of subs) {
+        sub(tokenized);
+      }
+      subscribers.delete(tokensCacheKey);
+    }
+  }).catch((error) => {
+    console.error("Failed to highlight code:", error);
+    subscribers.delete(tokensCacheKey);
+  });
+  return null;
+};
+var CodeBlockBody = memo(
+  ({
+    tokenized,
+    showLineNumbers,
+    className
+  }) => {
+    const preStyle = useMemo(
+      () => ({
+        backgroundColor: tokenized.bg,
+        color: tokenized.fg
+      }),
+      [tokenized.bg, tokenized.fg]
+    );
+    const keyedLines = useMemo(
+      () => addKeysToTokens(tokenized.tokens),
+      [tokenized.tokens]
+    );
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-sm",
+          className
+        ),
+        style: preStyle,
+        children: /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: cn(
+              "font-mono text-sm",
+              showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"
+            ),
+            children: keyedLines.map((keyedLine) => /* @__PURE__ */ jsx(
+              LineSpan,
+              {
+                keyedLine,
+                showLineNumbers
+              },
+              keyedLine.key
+            ))
+          }
+        )
+      }
+    );
+  },
+  (prevProps, nextProps) => prevProps.tokenized === nextProps.tokenized && prevProps.showLineNumbers === nextProps.showLineNumbers && prevProps.className === nextProps.className
+);
+CodeBlockBody.displayName = "CodeBlockBody";
+var CodeBlockContainer = ({
+  className,
+  language,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      className
+    ),
+    "data-language": language,
+    style: {
+      containIntrinsicSize: "auto 200px",
+      contentVisibility: "auto",
+      ...style
+    },
+    ...props
+  }
+);
+var CodeBlockHeader = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CodeBlockTitle = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
+var CodeBlockFilename = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("font-mono", className), ...props, children });
+var CodeBlockActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("-my-1 -mr-1 flex items-center gap-2", className),
+    ...props,
+    children
+  }
+);
+var CodeBlockContent = ({
+  code,
+  language,
+  showLineNumbers = false
+}) => {
+  const rawTokens = useMemo(() => createRawTokens(code), [code]);
+  const syncTokens = useMemo(
+    () => highlightCode(code, language) ?? rawTokens,
+    [code, language, rawTokens]
+  );
+  const [asyncTokens, setAsyncTokens] = useState(null);
+  const asyncKeyRef = useRef({ code, language });
+  if (asyncKeyRef.current.code !== code || asyncKeyRef.current.language !== language) {
+    asyncKeyRef.current = { code, language };
+    setAsyncTokens(null);
+  }
+  useEffect(() => {
+    let cancelled = false;
+    highlightCode(code, language, (result) => {
+      if (!cancelled) {
+        setAsyncTokens(result);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language]);
+  const tokenized = asyncTokens ?? syncTokens;
+  return /* @__PURE__ */ jsx("div", { className: "relative overflow-auto", children: /* @__PURE__ */ jsx(CodeBlockBody, { showLineNumbers, tokenized }) });
+};
+var CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ code }), [code]);
+  return /* @__PURE__ */ jsx(CodeBlockContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(CodeBlockContainer, { className, language, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      CodeBlockContent,
+      {
+        code,
+        language,
+        showLineNumbers
+      }
+    )
+  ] }) });
+};
+var CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const { code } = useContext(CodeBlockContext);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [code, onCopy, onError, timeout, isCopied]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+};
+var CodeBlockLanguageSelector = (props) => /* @__PURE__ */ jsx(Select, { ...props });
+var CodeBlockLanguageSelectorTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SelectTrigger,
+  {
+    className: cn(
+      "h-7 border-none bg-transparent px-2 text-xs shadow-none",
+      className
+    ),
+    size: "sm",
+    ...props
+  }
+);
+var CodeBlockLanguageSelectorValue = (props) => /* @__PURE__ */ jsx(SelectValue, { ...props });
+var CodeBlockLanguageSelectorContent = ({
+  align = "end",
+  ...props
+}) => /* @__PURE__ */ jsx(SelectContent, { align, ...props });
+var CodeBlockLanguageSelectorItem = (props) => /* @__PURE__ */ jsx(SelectItem, { ...props });
+
+export { CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/chunk-EGIUE7H2.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/info-card.tsx
+function InfoCard({
+  title,
+  description,
+  children,
+  actionLabel,
+  onActionClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "info-card",
+      className: "rounded-xl border border-gray-200 shadow-sm p-4 bg-white text-gray-900 " + (className ?? ""),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: title }),
+          description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm", children }),
+        actionLabel ? /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 active:scale-[0.98]",
+            onClick: onActionClick,
+            children: actionLabel
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+export { InfoCard };

package/dist/chunk-M5OONVIO.js

@@ -0,0 +1,90 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createContext, use } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { languages } from '@chatsdk-dev/elements/i18n/config';
+import { i18n } from '@chatsdk-dev/elements/i18n/i18next';
+import { getLocaleChainFromLocale } from '@chatsdk-dev/elements/i18n/utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/features/molecule/molecule-provider.tsx
+var queryClient = new QueryClient();
+function MoleculeTranslationsProvider({
+  localeConfig,
+  translationsConfig,
+  children
+}) {
+  let language = localeConfig?.language;
+  if (language && !languages.includes(language)) {
+    const [_languageTag] = getLocaleChainFromLocale(language);
+    if (_languageTag && languages.includes(_languageTag)) {
+      language = _languageTag;
+    }
+  }
+  let _i18n = i18n;
+  if (language && (i18n.language !== language || i18n.options.formality !== localeConfig?.formality) && Object.keys(i18n.services.resourceStore.data).includes(language)) {
+    _i18n = i18n.cloneInstance({
+      lng: language,
+      formality: localeConfig?.formality
+    });
+  }
+  if (translationsConfig) {
+    for (const [namespace, translations] of Object.entries(
+      translationsConfig
+    )) {
+      for (const [language2, resource] of Object.entries(translations)) {
+        _i18n.addResourceBundle(language2, namespace, resource, true, true);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx(I18nextProvider, { i18n: _i18n, defaultNS: "molecules", children });
+}
+function createMoleculeContext({
+  name
+}) {
+  const MoleculeContext = createContext(null);
+  function useMolecule() {
+    const v = use(MoleculeContext);
+    if (!v) throw new Error("Must be used within its MoleculeProvider");
+    return v;
+  }
+  function useMoleculeConfig() {
+    const v = use(MoleculeContext);
+    if (!v) throw new Error("Must be used within its MoleculeProvider");
+    return v.config;
+  }
+  function useMoleculeComponent() {
+    const v = use(MoleculeContext);
+    if (!v) throw new Error("Must be used within its MoleculeProvider");
+    return v.component;
+  }
+  function useMoleculeCallbacks() {
+    const v = use(MoleculeContext);
+    if (!v) throw new Error("Must be used within its MoleculeProvider");
+    return v.callbacks;
+  }
+  function TypedMoleculeProvider({
+    config = {},
+    component,
+    callbacks,
+    children
+  }) {
+    return /* @__PURE__ */ jsx(MoleculeContext.Provider, { value: { config, component, callbacks }, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(
+      MoleculeTranslationsProvider,
+      {
+        localeConfig: config.locale,
+        translationsConfig: config.translations,
+        children
+      }
+    ) }) });
+  }
+  TypedMoleculeProvider.displayName = `MoleculeProvider<${name}>`;
+  return {
+    useMolecule,
+    useMoleculeConfig,
+    useMoleculeComponent,
+    useMoleculeCallbacks,
+    MoleculeProvider: TypedMoleculeProvider
+  };
+}
+
+export { createMoleculeContext };

package/dist/chunk-MXTBCHYC.js

@@ -0,0 +1,31 @@
+import { getLogger } from './chunk-VS55HRUS.js';
+import { useChatSDKStore } from './chunk-YX46JVQN.js';
+import { mergeConfigs } from './chunk-RJG5D2TM.js';
+import React from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+function useMergeGlobalConfig(config) {
+  const globalConfig = useChatSDKStore(
+    useShallow((state) => ({
+      theme: state.theme,
+      locale: state.locale,
+      context: state.context,
+      api: state.api,
+      translations: state.translations,
+      logger: state.logger,
+      options: state.options
+    }))
+  );
+  const withGlobalConfig = React.useMemo(() => {
+    return mergeConfigs(globalConfig, config || {});
+  }, [globalConfig, config]);
+  const resolvedLogger = getLogger(withGlobalConfig.logger);
+  const resolvedLocale = withGlobalConfig.locale ? typeof withGlobalConfig.locale === "object" ? withGlobalConfig.locale : { language: withGlobalConfig.locale, formality: "formal" } : void 0;
+  return {
+    ...withGlobalConfig,
+    logger: resolvedLogger,
+    locale: resolvedLocale
+  };
+}
+
+export { useMergeGlobalConfig };

package/dist/chunk-NIC3MOMY.js

@@ -0,0 +1,55 @@
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { motion } from 'motion/react';
+import { memo, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ai-elements/shimmer.tsx
+var motionComponentCache = /* @__PURE__ */ new Map();
+var getMotionComponent = (element) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+var ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const MotionComponent = getMotionComponent(
+    Component
+  );
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread]
+  );
+  return /* @__PURE__ */ jsx(
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: {
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY
+      },
+      children
+    }
+  );
+};
+var Shimmer = memo(ShimmerComponent);
+
+export { Shimmer };