@xpert-ai/chatkit-ui 0.0.2

package/dist/index.css

@@ -0,0 +1,107 @@
+/* src/components/thread/markdown-styles.css */
+.markdown-content {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+.streaming-active .markdown-content {
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      black 0%,
+      black calc(100% - 60px),
+      transparent 100%);
+  mask-image:
+    linear-gradient(
+      to right,
+      black 0%,
+      black calc(100% - 60px),
+      transparent 100%);
+  animation: streamingFlow 0.4s ease-out forwards;
+}
+@keyframes streamingFlow {
+  from {
+    -webkit-mask-image:
+      linear-gradient(
+        to right,
+        black 0%,
+        black calc(100% - 80px),
+        transparent 100%);
+    mask-image:
+      linear-gradient(
+        to right,
+        black 0%,
+        black calc(100% - 80px),
+        transparent 100%);
+  }
+  to {
+    -webkit-mask-image:
+      linear-gradient(
+        to right,
+        black 0%,
+        black 100%,
+        transparent 100%);
+    mask-image:
+      linear-gradient(
+        to right,
+        black 0%,
+        black 100%,
+        transparent 100%);
+  }
+}
+.streaming-active .markdown-content p,
+.streaming-active .markdown-content li,
+.streaming-active .markdown-content pre,
+.streaming-active .markdown-content blockquote {
+  animation: contentReveal 0.25s ease-out;
+}
+@keyframes contentReveal {
+  from {
+    opacity: 0.6;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.markdown-content {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+.markdown-content code:not(pre code) {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+.markdown-content a {
+  color: #0070f3;
+  text-decoration: none;
+}
+.markdown-content a:hover {
+  text-decoration: underline;
+}
+.markdown-content blockquote {
+  border-left: 4px solid #ddd;
+  padding-left: 1rem;
+  color: #666;
+}
+.markdown-content pre {
+  overflow-x: auto;
+}
+.markdown-content table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.markdown-content th,
+.markdown-content td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.markdown-content th {
+  background-color: #f2f2f2;
+}
+.markdown-content tr:nth-child(even) {
+  background-color: #f9f9f9;
+}

package/dist/index.d.cts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChatKitOptions } from '@xpert-ai/chatkit-types';
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+type ChatProps = {
+    className?: string;
+    title?: string;
+    placeholder?: string;
+    clientSecret?: string;
+    options?: ChatKitOptions | null;
+};
+declare function Chat({ className, options, title, placeholder, clientSecret, }: ChatProps): react_jsx_runtime.JSX.Element;
+
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "default" | "secondary" | "ghost";
+    size?: "default" | "sm" | "icon";
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: "default" | "secondary" | "outline";
+} & React.RefAttributes<HTMLSpanElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Separator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+} & React.RefAttributes<HTMLDivElement>>;
+
+type TabsValue = string;
+type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
+    defaultValue?: TabsValue;
+    value?: TabsValue;
+    onValueChange?: (value: TabsValue) => void;
+};
+declare function Tabs({ className, defaultValue, value, onValueChange, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: TabsValue;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value: TabsValue;
+} & React.RefAttributes<HTMLDivElement>>;
+
+type ParentMessenger = {
+    isParentAvailable: boolean;
+    sendCommand: (command: 'onClientToolCall' | 'onGetClientSecret', data?: unknown, transfer?: Transferable[]) => Promise<unknown>;
+    sendEvent: (event: string, data?: [string, unknown], transfer?: Transferable[]) => void;
+};
+type ParentMessengerOptions = {
+    onSetOptions?: (options: ChatKitOptions | null) => void;
+};
+declare function useParentMessenger({ onSetOptions }?: ParentMessengerOptions): ParentMessenger;
+
+declare const supportedLocales: readonly ["en-US", "zh-CN"];
+type SupportedLocale = (typeof supportedLocales)[number];
+declare function setLanguage(locale?: string | null): SupportedLocale;
+declare function getLanguage(): SupportedLocale;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chat, type ChatProps, Input, type ParentMessenger, ScrollArea, ScrollBar, Separator, Tabs, TabsContent, TabsList, TabsTrigger, supportedLocales as chatkitSupportedLocales, getLanguage as getChatkitLanguage, setLanguage as setChatkitLanguage, useParentMessenger };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChatKitOptions } from '@xpert-ai/chatkit-types';
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+type ChatProps = {
+    className?: string;
+    title?: string;
+    placeholder?: string;
+    clientSecret?: string;
+    options?: ChatKitOptions | null;
+};
+declare function Chat({ className, options, title, placeholder, clientSecret, }: ChatProps): react_jsx_runtime.JSX.Element;
+
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "default" | "secondary" | "ghost";
+    size?: "default" | "sm" | "icon";
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    variant?: "default" | "secondary" | "outline";
+} & React.RefAttributes<HTMLSpanElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Separator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+} & React.RefAttributes<HTMLDivElement>>;
+
+type TabsValue = string;
+type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
+    defaultValue?: TabsValue;
+    value?: TabsValue;
+    onValueChange?: (value: TabsValue) => void;
+};
+declare function Tabs({ className, defaultValue, value, onValueChange, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: TabsValue;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value: TabsValue;
+} & React.RefAttributes<HTMLDivElement>>;
+
+type ParentMessenger = {
+    isParentAvailable: boolean;
+    sendCommand: (command: 'onClientToolCall' | 'onGetClientSecret', data?: unknown, transfer?: Transferable[]) => Promise<unknown>;
+    sendEvent: (event: string, data?: [string, unknown], transfer?: Transferable[]) => void;
+};
+type ParentMessengerOptions = {
+    onSetOptions?: (options: ChatKitOptions | null) => void;
+};
+declare function useParentMessenger({ onSetOptions }?: ParentMessengerOptions): ParentMessenger;
+
+declare const supportedLocales: readonly ["en-US", "zh-CN"];
+type SupportedLocale = (typeof supportedLocales)[number];
+declare function setLanguage(locale?: string | null): SupportedLocale;
+declare function getLanguage(): SupportedLocale;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chat, type ChatProps, Input, type ParentMessenger, ScrollArea, ScrollBar, Separator, Tabs, TabsContent, TabsList, TabsTrigger, supportedLocales as chatkitSupportedLocales, getLanguage as getChatkitLanguage, setLanguage as setChatkitLanguage, useParentMessenger };