@frankieai/react 0.2.13 → 0.2.14

package/dist/index.cjs

@@ -1060,6 +1060,20 @@ function AgentContext() {
 // src/components/chat/ChatEmptyState.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var NAMED_ICONS = {
+  sparkles: import_lucide_react2.Sparkles,
+  wand: import_lucide_react2.Wand2,
+  book: import_lucide_react2.BookOpen,
+  chat: import_lucide_react2.MessageSquare,
+  chart: import_lucide_react2.BarChart3,
+  bolt: import_lucide_react2.Zap,
+  music: import_lucide_react2.Music,
+  mic: import_lucide_react2.Mic,
+  image: import_lucide_react2.Image,
+  compass: import_lucide_react2.Compass,
+  lightbulb: import_lucide_react2.Lightbulb,
+  file: import_lucide_react2.FileText
+};
 var PROMPT_ICONS = [import_lucide_react2.Sparkles, import_lucide_react2.Wand2, import_lucide_react2.BarChart3, import_lucide_react2.Zap, import_lucide_react2.MessageSquare, import_lucide_react2.LayoutGrid];
 function splitPrompt(prompt) {
   const match = prompt.match(/^(.+?)\s+[—–]\s+(.+)$/) ?? prompt.match(/^(.+?)\s+-\s+(.+)$/);
@@ -1070,9 +1084,9 @@ function ChatEmptyState() {
   const { config } = useFrankie();
   const { send, busy, restoring } = useFrankieChat();
   const name = config?.branding.name ?? "Frankie";
-  const starters = config?.starterPrompts?.length ? config.starterPrompts.slice(0, 6).map((card) => ({ title: card.title, description: card.description, message: card.message })) : (config?.suggestedPrompts ?? []).slice(0, 6).map((prompt) => {
+  const starters = config?.starterPrompts?.length ? 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: void 0 };
   });
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "frankie-page-welcome", children: [
@@ -1085,7 +1099,7 @@ function ChatEmptyState() {
     starters.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "frankie-page-suggest", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "frankie-page-suggest-label", children: "Try asking me to" }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "frankie-page-prompts", children: 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 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", disabled: busy || restoring, onClick: () => void send(card.message), children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "frankie-prompt-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 18 }) }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "frankie-prompt-text", children: [
@@ -1485,6 +1499,7 @@ function renderToken(token) {
 
 // src/components/chat/ToolActivityList.tsx
 var import_lucide_react5 = require("lucide-react");
+var import_core = require("@frankieai/core");
 
 // src/components/ui/badge.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
@@ -1532,8 +1547,9 @@ function ToolActivityList({ tools, renderTool }) {
   ] });
 }
 function ToolActivityRow({ tool }) {
+  const isSkill = tool.name === import_core.SKILL_TOOL_NAME;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolIcon, { status: tool.status }),
+    isSkill && tool.status !== "running" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Sparkles, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolIcon, { status: tool.status }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: tool.label })
   ] });
 }