@chatsdk-dev/elements 0.0.1 → 0.1.2

package/dist/theme-Cb-RBWbR.d.ts

@@ -0,0 +1,38 @@
+import { TextVariants } from "@chatsdk-dev/ui/atoms/typography/text";
+
+//#region src/features/element/types/theme.d.ts
+type ColorScheme = "light" | "dark" | "system";
+type FontConfig = {
+  size: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  weight?: string;
+  family?: string;
+  style?: string;
+  transform?: string;
+  color?: string;
+  face?: Partial<{ [key in "400" | "500" | "600" | "700"]: {
+    normal?: string;
+    italic?: string;
+  } }>;
+};
+type RawFontProps = {
+  fontFamily?: string;
+  fontSize: number;
+  fontWeight: number;
+  lineHeight: number;
+};
+type ThemeConfig = {
+  colorScheme: ColorScheme;
+  font: {
+    body: FontConfig;
+    heading: FontConfig;
+    variants: Record<NonNullable<TextVariants["variant"]>, RawFontProps>;
+  };
+  defaultRadius: string;
+  defaultShadow: string;
+  components?: Record<string, object>;
+};
+//#endregion
+export { ThemeConfig as i, FontConfig as n, RawFontProps as r, ColorScheme as t };
+//# sourceMappingURL=theme-Cb-RBWbR.d.ts.map

package/dist/theme-Cb-RBWbR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-Cb-RBWbR.d.ts","names":[],"sources":["../src/features/element/types/theme.ts"],"mappings":";;;KAEY,WAAA;AAAA,KAEA,UAAA;EACV,IAAA;EACA,UAAA;EACA,aAAA;EACA,MAAA;EACA,MAAA;EACA,KAAA;EACA,SAAA;EACA,KAAA;EAEA,IAAA,GAAO,OAAA;IAEH,MAAA;IACA,MAAA;EAAA;AAAA;AAAA,KAKM,YAAA;EACV,UAAA;EACA,QAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,KAGU,WAAA;EACV,WAAA,EAAa,WAAA;EACb,IAAA;IACE,IAAA,EAAM,UAAA;IACN,OAAA,EAAS,UAAA;IACT,QAAA,EAAU,MAAA,CAAO,WAAA,CAAY,YAAA,cAA0B,YAAA;EAAA;EAEzD,aAAA;EACA,aAAA;EACA,UAAA,GAAa,MAAA;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatsdk-dev/elements",
-  "version": "0.0.1",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "files": [
@@ -17,31 +17,7 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css",
-    "./i18n/*": {
-      "types": "./dist/i18n/*.d.ts",
-      "default": "./dist/i18n/*.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "default": "./dist/components/*.js"
-    },
-    "./chat": {
-      "types": "./dist/features/chat/index.d.ts",
-      "default": "./dist/features/chat/index.js"
-    },
-    "./molecules/*": {
-      "types": "./dist/features/molecule/*.d.ts",
-      "default": "./dist/features/molecule/*.js"
-    },
-    "./common/*": {
-      "types": "./dist/common/*.d.ts",
-      "default": "./dist/common/*.js"
-    }
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "./styles.css": "./dist/styles.css"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -49,30 +25,14 @@
   },
   "dependencies": {
     "@ai-sdk/react": "3.0.118",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@rive-app/react-webgl2": "^4.27.2",
-    "@streamdown/cjk": "^1.0.3",
-    "@streamdown/code": "^1.1.1",
-    "@streamdown/math": "^1.0.2",
-    "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-query": "^5.94.5",
-    "@xyflow/react": "^12.10.1",
     "ai": "^6.0.134",
-    "ansi-to-react": "^6.2.6",
     "i18next": "^25.10.3",
     "lucide-react": "^0.577.0",
-    "media-chrome": "^4.18.2",
-    "motion": "^12.38.0",
-    "nanoid": "^5.1.7",
     "react-i18next": "^16.6.0",
-    "react-jsx-parser": "^2.4.1",
-    "shiki": "^4.0.2",
-    "streamdown": "^2.5.0",
-    "tokenlens": "^1.3.1",
-    "use-stick-to-bottom": "^1.1.3",
     "zustand": "^5.0.12",
-    "@chatsdk-dev/api-client": "0.0.1",
-    "@chatsdk-dev/ui": "0.0.1"
+    "@chatsdk-dev/ui": "0.1.2",
+    "@chatsdk-dev/api-client": "0.1.2"
   },
   "devDependencies": {
     "@storybook/react": "10.2.19",
@@ -83,13 +43,16 @@
     "@types/react-dom": "19.2.3",
     "eslint": "^9.39.4",
     "glob": "^10.4.5",
+    "postcss": "^8.5.8",
+    "postcss-cli": "^11.0.1",
+    "postcss-prefix-selector": "^2.1.1",
     "storybook": "10.2.19",
     "tailwindcss": "^4.2.2",
-    "tsup": "^8.5.1",
+    "tsdown": "^0.21.5",
     "typescript": "5.9.3",
-    "@chatsdk-dev/eslint-config": "0.0.0",
     "@chatsdk-dev/tailwind-config": "0.0.0",
-    "@chatsdk-dev/typescript-config": "0.0.0"
+    "@chatsdk-dev/typescript-config": "0.0.0",
+    "@chatsdk-dev/eslint-config": "0.0.0"
   },
   "keywords": [
     "react",
@@ -104,13 +67,18 @@
     "url": "https://github.com/Mimameid/chatsdk.git",
     "directory": "packages/elements"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "pnpm run build:clean && pnpm run build:lib && pnpm run build:styles",
     "build:clean": "rm -rf dist",
-    "build:lib": "tsup",
-    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
+    "build:lib": "tsdown",
+    "build:styles": "pnpm run build:styles:tw && pnpm run build:styles:scope",
+    "build:styles:tw": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
+    "build:styles:scope": "postcss ./dist/styles.css -o ./dist/styles.css",
     "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
-    "dev:lib": "tsup --watch",
+    "dev:lib": "tsdown --watch",
     "dev:ts": "tsc --watch --noEmit",
     "dev:storybook": "pnpm -C . run dev:styles & pnpm -C . run storybook",
     "check-types": "tsc --noEmit",

package/dist/chunk-2LHKM7RD.js

@@ -1,14 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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

@@ -1,36 +0,0 @@
-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

@@ -1,358 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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 };