@chatsdk-dev/elements 0.0.1 → 0.1.3

package/dist/chunk-TDP6D7U7.js

@@ -1,551 +0,0 @@
-import { ChatMenu } from './chunk-AP4MG32M.js';
-import { ChatHistoryEmpty } from './chunk-YXAMLTTT.js';
-import { chatQueryKeys } from './chunk-TDEFIW2L.js';
-import { createMoleculeContext } from './chunk-M5OONVIO.js';
-import { useMergeMoleculeConfig } from './chunk-VYDYCGJL.js';
-import { useChatStore } from './chunk-2LHKM7RD.js';
-import { getInitialMessagesFromStrings } from './chunk-5UMYP6MD.js';
-import { ChatMessage } from './chunk-SLJNKQ2G.js';
-import { getClient } from '@chatsdk-dev/api-client';
-import { useTranslation } from 'react-i18next';
-import { CardHeader, CardTitle, Card } from '@chatsdk-dev/ui/components/card';
-import { DotsLoader } from '@chatsdk-dev/ui/components/dots-loader';
-import { Text } from '@chatsdk-dev/ui/components/typography/text';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useState, useMemo, useEffect, useRef, Fragment } from 'react';
-import { Conversation, ConversationContent, ConversationScrollButton } from '@chatsdk-dev/elements/components/ai-elements/conversation';
-import { GlobeIcon, CheckIcon, ArrowLeft, Plus } from 'lucide-react';
-import { PromptInput, PromptInputTextarea, PromptInputSubmit, PromptInputTools, PromptInputButton } from '@chatsdk-dev/elements/components/ai-elements/prompt-input';
-import { ModelSelector, ModelSelectorTrigger, ModelSelectorLogo, ModelSelectorName, ModelSelectorContent, ModelSelectorInput, ModelSelectorList, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorItem, ModelSelectorLogoGroup } from '@chatsdk-dev/elements/components/ai-elements/model-selector';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useChat as useChat$1 } from '@ai-sdk/react';
-import { DefaultChatTransport } from 'ai';
-import { Button } from '@chatsdk-dev/ui/components/button';
-import { renderRelativeTime } from '@chatsdk-dev/elements/common/utilts';
-
-function useGetChatQuery({ chatId }) {
-  const client = useApiClient();
-  return useQuery({
-    queryKey: chatQueryKeys.get(chatId),
-    queryFn: async () => {
-      const { data, error } = await client.chats.get({
-        path: { chatId }
-      });
-      if (error) {
-        throw new Error(
-          "error" in error ? error.error : "Failed to fetch chat"
-        );
-      }
-      return data;
-    },
-    enabled: !!chatId
-  });
-}
-function ChatPromptInput({
-  chatId,
-  onSubmit,
-  onModelChange,
-  status,
-  ref
-}) {
-  const { data } = useGetChatQuery({ chatId });
-  const defaultModel = data?.chatModelSettings?.defaultModel;
-  const allowedModels = data?.chatModelSettings?.allowedModels;
-  const [input, setInput] = useState("");
-  const [model, setModel] = useState(defaultModel?.name);
-  const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
-  const [webSearch, setWebSearch] = useState(false);
-  const selectedModel = allowedModels?.find((m) => m.name === model);
-  const modelGroups = allowedModels?.map((m) => m.chef);
-  const hasMultipleModels = allowedModels && allowedModels.length > 1;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs(
-      PromptInput,
-      {
-        onSubmit: (message, event) => {
-          onSubmit(message, event);
-          setInput("");
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            PromptInputTextarea,
-            {
-              ref,
-              placeholder: data?.chatBaseSettings?.inputPlaceholder,
-              onChange: (e) => setInput(e.target.value),
-              value: input
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            PromptInputSubmit,
-            {
-              className: "m-1.5 self-end",
-              disabled: !input,
-              status
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(PromptInputTools, { children: [
-      /* @__PURE__ */ jsxs(
-        PromptInputButton,
-        {
-          variant: webSearch ? "primary" : "ghost",
-          onClick: () => setWebSearch(!webSearch),
-          children: [
-            /* @__PURE__ */ jsx(GlobeIcon, { size: 16 }),
-            /* @__PURE__ */ jsx("span", { children: "Search" })
-          ]
-        }
-      ),
-      hasMultipleModels && /* @__PURE__ */ jsxs(
-        ModelSelector,
-        {
-          onOpenChange: setModelSelectorOpen,
-          open: modelSelectorOpen,
-          children: [
-            /* @__PURE__ */ jsx(ModelSelectorTrigger, { children: /* @__PURE__ */ jsxs(PromptInputButton, { children: [
-              selectedModel?.chefSlug && /* @__PURE__ */ jsx(ModelSelectorLogo, { provider: selectedModel.chefSlug }),
-              /* @__PURE__ */ jsx(ModelSelectorName, { children: selectedModel?.name })
-            ] }) }),
-            /* @__PURE__ */ jsxs(ModelSelectorContent, { children: [
-              /* @__PURE__ */ jsx(ModelSelectorInput, { placeholder: "Search models..." }),
-              /* @__PURE__ */ jsxs(ModelSelectorList, { children: [
-                /* @__PURE__ */ jsx(ModelSelectorEmpty, { children: "No models found." }),
-                modelGroups?.map((chef) => /* @__PURE__ */ jsx(ModelSelectorGroup, { heading: chef, children: allowedModels.filter((m) => m.chef === chef).map((m) => /* @__PURE__ */ jsxs(
-                  ModelSelectorItem,
-                  {
-                    onSelect: () => {
-                      setModel(m.name);
-                      onModelChange?.(m);
-                      setModelSelectorOpen(false);
-                    },
-                    value: m.name,
-                    children: [
-                      /* @__PURE__ */ jsx(ModelSelectorLogo, { provider: m.chefSlug }),
-                      /* @__PURE__ */ jsx(ModelSelectorName, { children: m.name }),
-                      /* @__PURE__ */ jsx(ModelSelectorLogoGroup, { children: m.providers.map((provider) => /* @__PURE__ */ jsx(
-                        ModelSelectorLogo,
-                        {
-                          provider
-                        },
-                        provider
-                      )) }),
-                      selectedModel?.name === m.name ? /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto size-4" }) : /* @__PURE__ */ jsx("div", { className: "ml-auto size-4" })
-                    ]
-                  },
-                  m.name
-                )) }, chef))
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-async function getConversation({
-  client,
-  chatId,
-  actorId,
-  conversationId
-}) {
-  if (!conversationId) {
-    const { data: newConversation, error: error2 } = await client.chats.conversations.create({
-      path: { chatId },
-      body: { actorId }
-    });
-    if (error2) {
-      throw new Error(
-        "error" in error2 ? error2.error : "Failed to create conversation"
-      );
-    }
-    useChatStore.setState({
-      ...useChatStore.getState(),
-      selectedConversationId: newConversation._id
-    });
-    return newConversation;
-  }
-  const { data, error } = await client.chats.conversations.get({
-    path: { chatId, conversationId }
-  });
-  if (error) {
-    throw new Error(
-      "error" in error ? error.error : "Failed to fetch conversation"
-    );
-  }
-  return data;
-}
-function getConversationQueryConfig({
-  chatId,
-  conversationId,
-  client,
-  actorId
-}) {
-  return {
-    queryKey: chatQueryKeys.conversation(chatId, conversationId),
-    queryFn: () => getConversation({ client, chatId, conversationId, actorId })
-  };
-}
-function useGetConversationQuery({
-  chatId,
-  conversationId
-}) {
-  const client = useApiClient();
-  const { context } = useMoleculeConfig();
-  return useQuery({
-    ...getConversationQueryConfig({
-      chatId,
-      conversationId,
-      client,
-      actorId: context?.actor?.id ?? ""
-    }),
-    enabled: !!chatId,
-    staleTime: 200
-  });
-}
-function useInitialMessages() {
-  const { selectedConversationId } = useChatStore();
-  const { chatId } = useMoleculeComponent();
-  const { data } = useGetChatQuery({ chatId });
-  const { data: conversation } = useGetConversationQuery({
-    chatId,
-    conversationId: selectedConversationId
-  });
-  const conversationMessages = useMemo(() => {
-    if (!selectedConversationId) return void 0;
-    return conversation?.messages?.map((msg) => {
-      return {
-        id: msg.id,
-        role: msg.role,
-        parts: msg.parts.map((p) => ({
-          type: "text",
-          text: p.text ?? ""
-        })),
-        metadata: msg
-      };
-    });
-  }, [conversation, selectedConversationId]);
-  const initialMessages = useMemo(() => {
-    const initialChatMessages = getInitialMessagesFromStrings(
-      data?.chatBaseSettings?.initialChatMessages ?? []
-    );
-    return [...initialChatMessages, ...conversationMessages ?? []];
-  }, [data?.chatBaseSettings?.initialChatMessages, conversationMessages]);
-  return initialMessages;
-}
-
-// src/features/chat/chat-element/use-chat.tsx
-function useChat() {
-  const client = useApiClient();
-  const { config, component } = useMolecule();
-  const { selectedConversationId, conversationType } = useChatStore();
-  const initialMessages = useInitialMessages();
-  const useChatResult = useChat$1({
-    messages: initialMessages,
-    transport: new DefaultChatTransport({
-      prepareSendMessagesRequest: ({
-        body,
-        headers,
-        credentials,
-        id,
-        messages,
-        trigger,
-        messageId
-      }) => {
-        return {
-          api: client.getUrl("chats.conversations.completion", {
-            chatId: component.chatId,
-            conversationId: body?.conversationId || "new"
-          }),
-          body: {
-            ...body,
-            id,
-            messages,
-            trigger,
-            messageId
-          },
-          headers,
-          credentials
-        };
-      },
-      headers: {
-        ...config.api?.headers
-      }
-    })
-  });
-  useEffect(() => {
-    if (conversationType === "history" || !selectedConversationId) {
-      useChatResult.stop();
-      useChatResult.setMessages(initialMessages);
-    }
-  }, [conversationType, selectedConversationId, initialMessages]);
-  return useChatResult;
-}
-function ChatElement() {
-  const queryClient = useQueryClient();
-  const client = useApiClient();
-  const { chatId } = useMoleculeComponent();
-  const { context } = useMoleculeConfig();
-  const { selectedConversationId } = useChatStore();
-  const { data: conversation } = useGetConversationQuery({
-    chatId,
-    conversationId: selectedConversationId
-  });
-  const { messages, sendMessage, status } = useChat();
-  const promptInputRef = useRef(null);
-  useEffect(() => {
-    promptInputRef.current?.focus();
-  }, [selectedConversationId]);
-  const handleSubmit = async (message) => {
-    let conversationId = conversation?._id;
-    if (!conversation) {
-      const newConversation = await queryClient.fetchQuery({
-        ...getConversationQueryConfig({
-          chatId,
-          conversationId: selectedConversationId,
-          client,
-          actorId: context?.actor?.id ?? ""
-        })
-      });
-      conversationId = newConversation._id;
-    }
-    sendMessage({ text: message.text }, { body: { conversationId } });
-  };
-  const lastMessage = messages[messages.length - 1];
-  const isWaitingForContent = status === "submitted" || status === "streaming" && lastMessage?.role === "assistant" && !lastMessage.parts.some(
-    (part) => part.type === "text" && part.text.length > 0
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Conversation, { children: [
-      /* @__PURE__ */ jsxs(ConversationContent, { children: [
-        /* @__PURE__ */ jsx(ChatMessage, { messages }),
-        isWaitingForContent && /* @__PURE__ */ jsx(DotsLoader, {})
-      ] }),
-      /* @__PURE__ */ jsx(ConversationScrollButton, {})
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "m-4 my-2", children: /* @__PURE__ */ jsx(
-      ChatPromptInput,
-      {
-        ref: promptInputRef,
-        chatId,
-        onSubmit: handleSubmit,
-        status
-      }
-    ) })
-  ] });
-}
-ChatElement.displayName = "ChatElement";
-function ChatHeader({ chatId }) {
-  const { t } = useTranslation();
-  const { tab, setTab } = useChatStore();
-  const { data } = useGetChatQuery({ chatId });
-  const [_, setImgLoaded] = useState(false);
-  const name = data?.chatAppearanceSettings?.displayName;
-  const iconUrl = data?.chatAppearanceSettings?.icon?.url;
-  return /* @__PURE__ */ jsxs(CardHeader, { className: "flex justify-between items-center h-14 bg-slate-900 dark:bg-zinc-400 rounded-t-lg px-4!", children: [
-    /* @__PURE__ */ jsxs(CardTitle, { children: [
-      tab === "chat" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        iconUrl && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: iconUrl,
-            alt: "Chat Icon",
-            className: "inline-block w-4 h-4",
-            onLoad: () => setImgLoaded(true)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            variant: "h1",
-            className: "text-sm text-background flex items-center gap-2",
-            children: name
-          }
-        )
-      ] }),
-      tab === "history" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: () => setTab("chat"),
-            variant: "transparent",
-            className: "p-0!",
-            children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            variant: "h1",
-            className: "text-sm text-background flex items-center gap-2",
-            children: t("header.history-tab-label")
-          }
-        )
-      ] })
-    ] }),
-    tab === "chat" && /* @__PURE__ */ jsx(ChatMenu, {})
-  ] });
-}
-function useListConversationsQuery({
-  chatId
-}) {
-  const client = useApiClient();
-  const { context } = useMoleculeConfig();
-  return useQuery({
-    queryKey: chatQueryKeys.listConversations(chatId),
-    queryFn: async () => {
-      const { data, error } = await client.chats.conversations.list({
-        path: { chatId },
-        query: { actorId: context?.actor?.id ?? "" }
-      });
-      if (error) {
-        throw new Error(
-          "error" in error ? error.error : "Failed to fetch conversations"
-        );
-      }
-      return data.conversations.reverse();
-    },
-    enabled: !!chatId
-  });
-}
-function ChatHistory() {
-  const { t, i18n } = useTranslation("chat", { keyPrefix: "history" });
-  const queryClient = useQueryClient();
-  const { chatId } = useMoleculeComponent();
-  const { data, isLoading } = useListConversationsQuery({ chatId });
-  const { setSelectedConversationId, setTab, setConversationType } = useChatStore();
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(DotsLoader, {}) });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col gap-1 overflow-y-auto gap-2 p-2", children: [
-    data?.length === 0 ? /* @__PURE__ */ jsx(ChatHistoryEmpty, {}) : data?.map((conversation, index) => /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "ghost",
-        className: "flex flex-col items-start justify-center gap-2 px-3 py-2 h-auto text-left",
-        onClick: () => {
-          queryClient.invalidateQueries({
-            queryKey: chatQueryKeys.conversation(chatId, conversation._id)
-          });
-          setSelectedConversationId(conversation._id);
-          setTab("chat");
-          setConversationType("history");
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "self-stretch flex justify-between gap-1", children: [
-            /* @__PURE__ */ jsxs(Text, { className: "truncate text-sm", children: [
-              data.length - index,
-              ":",
-              " ",
-              conversation.title ?? t("unitled-conversation")
-            ] }),
-            /* @__PURE__ */ jsx(Text, { variant: "tiny", color: "muted", children: renderRelativeTime({
-              date: conversation._creationTime,
-              locale: i18n.language
-            }) })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: "flex-1 min-w-0 max-w-full truncate",
-              variant: "paragraph2",
-              color: "muted",
-              children: conversation.summary
-            }
-          )
-        ]
-      },
-      conversation._id
-    )),
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        className: "absolute bottom-6 left-1/2 -translate-x-1/2",
-        onClick: () => {
-          setConversationType("new");
-          setSelectedConversationId();
-          setTab("chat");
-        },
-        children: [
-          /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
-          t("new-conversation")
-        ]
-      }
-    )
-  ] });
-}
-function ChatCard() {
-  const { t } = useTranslation();
-  const { chatId } = useMoleculeComponent();
-  const { tab, selectedConversationId, conversationType } = useChatStore();
-  useListConversationsQuery({ chatId });
-  const { isLoading, data: chat } = useGetChatQuery({ chatId });
-  const { isLoading: isConversationLoading } = useGetConversationQuery({
-    chatId,
-    conversationId: selectedConversationId
-  });
-  const canCreateMessage = chat?.chatModelSettings?.allowedModels && chat?.chatModelSettings?.allowedModels.length > 0;
-  if (!canCreateMessage && chat?.chatBaseSettings?.hideChatWhenInsufficientCredits) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Card, { className: "min-w-[320px] h-[640px] w-[400px] flex flex-col relative p-0 rounded-lg gap-0", children: [
-    isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-card rounded-lg", children: /* @__PURE__ */ jsx(DotsLoader, {}) }),
-    /* @__PURE__ */ jsx(ChatHeader, { chatId }),
-    conversationType === "history" && isConversationLoading && /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center z-10 bg-card rounded-lg", children: /* @__PURE__ */ jsx(DotsLoader, {}) }),
-    !isLoading && (conversationType === "new" || !isConversationLoading) && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: tab !== "chat" ? "hidden" : "flex flex-col flex-1 min-h-0",
-        children: [
-          conversationType === "history" && isConversationLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-card rounded-lg", children: /* @__PURE__ */ jsx(DotsLoader, {}) }),
-          canCreateMessage ? /* @__PURE__ */ jsx(ChatElement, {}) : /* @__PURE__ */ jsx("div", { className: "m-4 h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
-            Text,
-            {
-              variant: "paragraph1",
-              color: "muted",
-              className: "text-center font-light italic",
-              children: t("chat-card.insufficient-credits-error")
-            }
-          ) })
-        ]
-      }
-    ),
-    !isLoading && tab === "history" && /* @__PURE__ */ jsx(ChatHistory, {})
-  ] });
-}
-var {
-  MoleculeProvider,
-  useMolecule,
-  useMoleculeConfig,
-  useMoleculeComponent,
-  useMoleculeCallbacks
-} = createMoleculeContext({ name: "ChatSDK.Chat" });
-function ChatMolecule(props) {
-  const { config, callbacks, ...componentProps } = useMergeMoleculeConfig({
-    props,
-    name: "ChatSDK.Chat"
-  });
-  if (!componentProps.chatId) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    MoleculeProvider,
-    {
-      config,
-      component: componentProps,
-      callbacks,
-      children: /* @__PURE__ */ jsx(ChatCard, {})
-    }
-  );
-}
-ChatMolecule.displayName = "ChatSDK.ChatMolecule";
-
-// src/features/data-fetching/use-api-client.ts
-function useApiClient() {
-  const { api } = useMoleculeConfig();
-  return getClient(api ?? {});
-}
-
-export { ChatCard, ChatElement, ChatHeader, ChatHistory, ChatMolecule, ChatPromptInput, MoleculeProvider, getConversationQueryConfig, useApiClient, useChat, useGetChatQuery, useGetConversationQuery, useInitialMessages, useListConversationsQuery, useMolecule, useMoleculeCallbacks, useMoleculeComponent, useMoleculeConfig };

package/dist/chunk-V2ITXC65.js

@@ -1,24 +0,0 @@
-import { resources, languages, defaultNamespace, fallbackLng } from './chunk-R7G3RQLU.js';
-import i18next from 'i18next';
-import { initReactI18next } from 'react-i18next/initReactI18next';
-
-var runsOnServerSide = typeof window === "undefined";
-var elementsI18n = i18next.createInstance();
-elementsI18n.use(initReactI18next).init({
-  // debug: true,
-  showSupportNotice: false,
-  supportedLngs: languages,
-  fallbackLng,
-  fallbackNS: defaultNamespace,
-  defaultNS: defaultNamespace,
-  lng: void 0,
-  // detect the language on client side
-  detection: {
-    order: ["path", "htmlTag", "cookie", "navigator"]
-  },
-  preload: runsOnServerSide ? languages : [],
-  resources
-});
-var i18n = elementsI18n;
-
-export { i18n };

package/dist/chunk-VS55HRUS.js

@@ -1,16 +0,0 @@
-// src/features/logger/logger.ts
-function noOp() {
-}
-function getLogger(loggers) {
-  const _loggers = typeof loggers === "function" ? { info: loggers } : loggers;
-  const infoLogger = _loggers?.info || noOp;
-  const warnLogger = _loggers?.warn || infoLogger;
-  const errorLogger = _loggers?.error || infoLogger;
-  return {
-    info: infoLogger,
-    warn: warnLogger,
-    error: errorLogger
-  };
-}
-
-export { getLogger };

package/dist/chunk-VYDYCGJL.js

@@ -1,25 +0,0 @@
-import { useMergeGlobalConfig } from './chunk-MXTBCHYC.js';
-
-// src/features/molecule/use-molecule-config.ts
-function useMergeMoleculeConfig(moleculeConfig) {
-  const {
-    defaultProps: flatDefaultProps,
-    component,
-    ...flatProps
-  } = moleculeConfig.props;
-  const { defaultProps: componentDefaultProps, ...componentProps } = component || {};
-  const _defaultProps = { ...flatDefaultProps, ...componentDefaultProps };
-  const _props = { ...componentProps, ...flatProps };
-  const { config, onloading, onsuccess, onerror, ...rest } = {
-    ..._defaultProps,
-    ..._props
-  };
-  const mergedConfig = useMergeGlobalConfig(config);
-  return {
-    ...rest,
-    config: mergedConfig,
-    callbacks: { onloading, onsuccess, onerror }
-  };
-}
-
-export { useMergeMoleculeConfig };