@schandlergarcia/sf-web-components 1.8.0 → 1.9.0

package/src/components/library/theme/{AppThemeProvider.jsx → AppThemeProvider.tsx}

@@ -1,7 +1,15 @@
 import React from "react";
-import { tokens, getTokenCSSProperties } from "./tokens";
+import { tokens, getTokenCSSProperties, Tokens } from "./tokens";
 
-const ThemeModeContext = React.createContext({
+export type ThemeMode = "light" | "dark";
+
+export interface ThemeModeContextValue {
+  mode: ThemeMode;
+  theme: Tokens;
+  toggle: () => void;
+}
+
+const ThemeModeContext = React.createContext<ThemeModeContextValue>({
   mode: "light",
   theme: tokens,
   toggle: () => {}
@@ -9,14 +17,14 @@ const ThemeModeContext = React.createContext({
 
 const STORAGE_KEY = "app-color-mode";
 
-function applyHtmlDarkClass(mode) {
+function applyHtmlDarkClass(mode: ThemeMode): void {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   if (mode === "dark") root.classList.add("dark");
   else root.classList.remove("dark");
 }
 
-function applyTokenCSSProperties() {
+function applyTokenCSSProperties(): void {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   const props = getTokenCSSProperties();
@@ -25,12 +33,17 @@ function applyTokenCSSProperties() {
   }
 }
 
-export function useThemeMode() {
+export function useThemeMode(): ThemeModeContextValue {
   return React.useContext(ThemeModeContext);
 }
 
-export default function AppThemeProvider({ initialMode = "light", children }) {
-  const [mode, setMode] = React.useState(initialMode);
+export interface AppThemeProviderProps {
+  initialMode?: ThemeMode;
+  children: React.ReactNode;
+}
+
+export default function AppThemeProvider({ initialMode = "light", children }: AppThemeProviderProps) {
+  const [mode, setMode] = React.useState<ThemeMode>(initialMode);
 
   React.useEffect(() => {
     applyTokenCSSProperties();

package/src/components/library/theme/{tokens.jsx → tokens.tsx}

@@ -10,7 +10,41 @@
  * and tailwind.config.js references them via var(--color-brand-*).
  */
 
-export const tokens = {
+export interface ColorShades {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+}
+
+export interface Tokens {
+  colors: {
+    brand: ColorShades;
+    accent: ColorShades;
+  };
+  fonts: {
+    sans: string;
+    mono: string;
+  };
+  radius: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+  spacing: {
+    pageX: string;
+    pageY: string;
+  };
+}
+
+export const tokens: Tokens = {
   colors: {
     brand: {
       50: "#EEF2FF",
@@ -61,8 +95,8 @@ export const tokens = {
  * Generates CSS custom property assignments from the token palettes.
  * Used by AppThemeProvider to inject on :root at runtime.
  */
-export function getTokenCSSProperties() {
-  const props = {};
+export function getTokenCSSProperties(): Record<string, string> {
+  const props: Record<string, string> = {};
   for (const [palette, shades] of Object.entries(tokens.colors)) {
     for (const [shade, value] of Object.entries(shades)) {
       props[`--color-${palette}-${shade}`] = value;

package/src/components/library/chat/index.jsx

@@ -1,10 +0,0 @@
-export { default as ChatPanel } from "./ChatPanel";
-export { default as ChatBar } from "./ChatBar";
-export { default as ChatMessageList } from "./ChatMessageList";
-export { default as ChatMessage } from "./ChatMessage";
-export { default as ChatInput } from "./ChatInput";
-export { default as ChatTypingIndicator } from "./ChatTypingIndicator";
-export { default as ChatSuggestions } from "./ChatSuggestions";
-export { default as ChatToolCall } from "./ChatToolCall";
-export { default as ChatWelcome } from "./ChatWelcome";
-export { default as useChatState } from "./useChatState";

package/src/components/library/chat/useChatState.jsx

@@ -1,130 +0,0 @@
-import { useState, useCallback, useRef } from "react";
-
-let _nextId = 1;
-function uid() {
-  return `msg-${Date.now()}-${_nextId++}`;
-}
-
-/**
- * Core state management hook for AI chat.
- *
- * @param {Object} options
- * @param {Array}  options.initialMessages — seed the conversation
- * @param {Function} options.onSend — async (userMessage, allMessages) => assistantMessage | void
- *   Return a message object to add it, or use appendChunk / addMessage for streaming.
- *
- * @returns {Object}
- *
- * @example
- * const chat = useChatState({
- *   onSend: async (msg, history) => {
- *     const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages: history }) });
- *     const data = await res.json();
- *     return { role: "assistant", content: data.reply, components: data.components };
- *   },
- * });
- */
-export default function useChatState({ initialMessages = [], onSend } = {}) {
-  const [messages, setMessages] = useState(() =>
-    initialMessages.map((m) => ({ id: uid(), timestamp: new Date().toISOString(), ...m }))
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [error, setError] = useState(null);
-  const onSendRef = useRef(onSend);
-  onSendRef.current = onSend;
-
-  const addMessage = useCallback((msg) => {
-    const full = { id: uid(), timestamp: new Date().toISOString(), ...msg };
-    setMessages((prev) => [...prev, full]);
-    return full.id;
-  }, []);
-
-  const updateMessage = useCallback((id, updates) => {
-    setMessages((prev) =>
-      prev.map((m) => (m.id === id ? { ...m, ...updates } : m))
-    );
-  }, []);
-
-  const appendChunk = useCallback((id, chunk) => {
-    setMessages((prev) =>
-      prev.map((m) =>
-        m.id === id ? { ...m, content: (m.content ?? "") + chunk } : m
-      )
-    );
-  }, []);
-
-  const removeMessage = useCallback((id) => {
-    setMessages((prev) => prev.filter((m) => m.id !== id));
-  }, []);
-
-  const clearMessages = useCallback(() => {
-    setMessages([]);
-    setError(null);
-  }, []);
-
-  const sendMessage = useCallback(
-    async (content, extra = {}) => {
-      if (!content?.trim()) return;
-      setError(null);
-
-      const userMsg = { role: "user", content: content.trim(), ...extra };
-      const userId = uid();
-      const fullUser = { ...userMsg, id: userId, timestamp: new Date().toISOString() };
-
-      setMessages((prev) => [...prev, fullUser]);
-      setIsLoading(true);
-
-      try {
-        const allMsgs = [...messages, fullUser];
-        const result = await onSendRef.current?.(fullUser, allMsgs, {
-          addMessage,
-          updateMessage,
-          appendChunk,
-          setStreaming: setIsStreaming,
-        });
-
-        if (result && typeof result === "object" && result.role) {
-          addMessage(result);
-        }
-      } catch (err) {
-        setError(err?.message ?? "Failed to send message");
-        addMessage({
-          role: "system",
-          content: err?.message ?? "Something went wrong. Please try again.",
-          isError: true,
-        });
-      } finally {
-        setIsLoading(false);
-        setIsStreaming(false);
-      }
-    },
-    [messages, addMessage, updateMessage, appendChunk]
-  );
-
-  const retryLast = useCallback(() => {
-    const lastUser = [...messages].reverse().find((m) => m.role === "user");
-    if (!lastUser) return;
-
-    const idx = messages.lastIndexOf(lastUser);
-    setMessages(messages.slice(0, idx));
-    setError(null);
-
-    sendMessage(lastUser.content);
-  }, [messages, sendMessage]);
-
-  return {
-    messages,
-    isLoading,
-    isStreaming,
-    error,
-    sendMessage,
-    addMessage,
-    updateMessage,
-    appendChunk,
-    removeMessage,
-    clearMessages,
-    retryLast,
-    setError,
-  };
-}