@frankieai/react 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Embeddable, themeable chat widget for the Frankie onboarding agent — shadcn/ui components, works with or without Tailwind in the host app.",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.460.0",
     "tailwind-merge": "^2.5.0",
-    "@frankieai/core": "0.2.4"
+    "@frankieai/core": "0.2.5"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",

package/src/components/chat/ChatEmptyState.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import { BarChart3, LayoutGrid, MessageSquare, Sparkles, Wand2, Zap } from "lucide-react";
+import { BarChart3, BookOpen, Compass, FileText, Image as ImageIcon, LayoutGrid, Lightbulb, MessageSquare, Mic, Music, Sparkles, Wand2, Zap, type LucideIcon } from "lucide-react";
 import { useFrankie } from "../../hooks/FrankieProvider.jsx";
 import { useFrankieChat } from "../../hooks/useFrankieChat.js";
 
-/** Rotating icon set for the suggestion cards, so each reads distinctly even when prompts come from config. */
+/** Named icons a starter card may choose (mirrors core's STARTER_PROMPT_ICONS). */
+const NAMED_ICONS: Record<string, LucideIcon> = {
+  sparkles: Sparkles, wand: Wand2, book: BookOpen, chat: MessageSquare, chart: BarChart3, bolt: Zap,
+  music: Music, mic: Mic, image: ImageIcon, compass: Compass, lightbulb: Lightbulb, file: FileText,
+};
+
+/** Rotating icon set for cards without an explicit icon, so each reads distinctly. */
 const PROMPT_ICONS = [Sparkles, Wand2, BarChart3, Zap, MessageSquare, LayoutGrid];
 
 /** A prompt may pack a short description after an em/en dash or a hyphen ("Do X — the details"); split it so the card can show a title and subtitle. Falls back to title-only. */
@@ -31,10 +37,10 @@ export function ChatEmptyState() {
   // message on click. Otherwise fall back to the string suggestions (authored or
   // skill-derived), where the card title is also the message that's sent.
   const starters = config?.starterPrompts?.length
-    ? config.starterPrompts.slice(0, 6).map(card => ({ title: card.title, description: card.description, message: card.message }))
+    ? config.starterPrompts.slice(0, 6).map(card => ({ title: card.title, description: card.description, message: card.message, icon: card.icon }))
     : (config?.suggestedPrompts ?? []).slice(0, 6).map(prompt => {
         const { title, description } = splitPrompt(prompt);
-        return { title, description, message: title };
+        return { title, description, message: title, icon: undefined as string | undefined };
       });
   return <section className="frankie-page-empty" aria-label="Start a conversation">
     <div className="frankie-page-welcome">
@@ -44,7 +50,7 @@ export function ChatEmptyState() {
     {starters.length ? <div className="frankie-page-suggest">
       <p className="frankie-page-suggest-label">Try asking me to</p>
       <div className="frankie-page-prompts">{starters.map((card, index) => {
-        const Icon = PROMPT_ICONS[index % PROMPT_ICONS.length]!;
+        const Icon = (card.icon && NAMED_ICONS[card.icon]) || PROMPT_ICONS[index % PROMPT_ICONS.length]!;
         return <button key={card.title + index} type="button" disabled={busy || restoring} onClick={() => void send(card.message)}>
           <span className="frankie-prompt-icon" aria-hidden><Icon size={18} /></span>
           <span className="frankie-prompt-text"><strong>{card.title}</strong>{card.description ? <small>{card.description}</small> : null}</span>

package/src/components/chat/ToolActivityList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Check, ChevronDown, Loader2, ShieldAlert, Wrench, X } from "lucide-react";
+import { Check, ChevronDown, Loader2, ShieldAlert, Sparkles, Wrench, X } from "lucide-react";
+import { SKILL_TOOL_NAME } from "@frankieai/core";
 import { Badge } from "../ui/badge.js";
 import type { ToolActivity } from "../../lib/messages.js";
 
@@ -28,9 +29,13 @@ export function ToolActivityList({ tools, renderTool }: ToolActivityListProps) {
 }
 
 export function ToolActivityRow({ tool }: { tool: ToolActivity }) {
+  // A skill-activation call carries its own icon so "Using skill: X" reads as a
+  // skill being applied, not just another tool; the spinner still wins while it
+  // runs so its status stays legible.
+  const isSkill = tool.name === SKILL_TOOL_NAME;
   return (
     <Badge variant={badgeVariant(tool.status)} title={tool.detail ?? tool.name}>
-      <ToolIcon status={tool.status} />
+      {isSkill && tool.status !== "running" ? <Sparkles className="size-3" aria-hidden="true" /> : <ToolIcon status={tool.status} />}
       <span className="truncate">{tool.label}</span>
     </Badge>
   );