create-lykomi-app 0.9.21 → 0.10.0

package/template/src/pages/starter-prompts.tsx

@@ -0,0 +1,30 @@
+import { ThreadPrimitive } from "@assistant-ui/react";
+import { Button } from "@lykomi/web-primitives";
+import { useChatBubbleStore } from "@lykomi/web-ui";
+
+const prompts = [
+  "Say hello world using the hello_world tool",
+  "Check the weather in Seattle",
+  "What tools can you use?",
+];
+
+/** One click demonstrates a real AG-UI turn with the bundled tools. */
+export function StarterPrompts() {
+  return (
+    <div className="flex flex-wrap justify-center gap-2" aria-label="Try a prompt">
+      {prompts.map((prompt) => (
+        <ThreadPrimitive.Suggestion
+          key={prompt}
+          prompt={prompt}
+          send
+          asChild
+          onClick={() => useChatBubbleStore.getState().open()}
+        >
+          <Button variant="outline" size="sm" className="h-auto min-h-9 text-wrap py-2 text-sm">
+            {prompt}
+          </Button>
+        </ThreadPrimitive.Suggestion>
+      ))}
+    </div>
+  );
+}

package/template/src/starter-module.ts

@@ -0,0 +1,51 @@
+import { guideWindows } from "./pages/guide-windows.ts";
+import { useEffect } from "react";
+import { BookOpen } from "lucide-react";
+import { useNavigate } from "react-router";
+import { defineChatModule } from "@lykomi/web-shell";
+import { useNavStore } from "@lykomi/web-ui";
+
+function useStarterNavigation() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const protect = (event: BeforeUnloadEvent) => {
+      if (guideWindows.get().tabs.some((tab) => tab.dirty)) {
+        event.preventDefault();
+        event.returnValue = "";
+      }
+    };
+    window.addEventListener("beforeunload", protect);
+    useNavStore.getState().addGroup({
+      label: "Starter",
+      hideLabel: true,
+      items: [
+        {
+          to: "/guide",
+          label: "Guide",
+          icon: BookOpen,
+          description: "Starter guide for the agent, tools, and UI modules",
+          contextInstructions:
+            "The user is reading the starter guide. Explain how to replace the sample tools, " +
+            "add a page, or connect a service when asked. Do not claim a service is configured " +
+            "unless the user has supplied its settings.",
+        },
+      ],
+    });
+    useNavStore.getState().setUserMenuAction({
+      id: "starter-guide",
+      label: "About this starter",
+      onSelect: () => navigate("/guide"),
+    });
+    return () => {
+      window.removeEventListener("beforeunload", protect);
+      useNavStore.getState().removeGroup("Starter");
+      useNavStore.getState().removeUserMenuAction("starter-guide");
+    };
+  }, [navigate]);
+}
+
+/** A small module demonstrates how an app owns its routes and navigation. */
+export const starterModule = defineChatModule({
+  name: "starter-guide",
+  useInit: useStarterNavigation,
+});

package/template/src/theme.ts

@@ -0,0 +1,82 @@
+import type { ThemeLayer } from "@lykomi/web-ui";
+
+/** The LYKOMI starter palette. Replace or extend this layer for your app. */
+export const starterTheme: ThemeLayer = {
+  id: "lykomi-starter",
+  name: "LYKOMI UI",
+  definition: {
+    light: {
+      background: "#FAFAF9",
+      foreground: "#0B0C0E",
+      card: "#FFFFFF",
+      cardForeground: "#0B0C0E",
+      primary: "#3F666B",
+      primaryForeground: "#FFFFFF",
+      secondary: "#E8E8E5",
+      secondaryForeground: "#0B0C0E",
+      muted: "#EDEDEB",
+      mutedForeground: "#626369",
+      accent: "#E5EEEF",
+      accentForeground: "#3F666B",
+      border: "#DCDDD9",
+      input: "#DCDDD9",
+      ring: "#3F666B",
+    },
+    dark: {
+      background: "#0D0D10",
+      foreground: "#EBEBF4",
+      card: "#151519",
+      cardForeground: "#EBEBF4",
+      primary: "#F4F4F4",
+      primaryForeground: "#101010",
+      secondary: "#1E1E22",
+      secondaryForeground: "#EBEBF4",
+      muted: "#1E1E22",
+      mutedForeground: "#B8B8C2",
+      accent: "#1E1D2C",
+      accentForeground: "#EBEBF4",
+      border: "#2A2A2E",
+      input: "#2A2A2E",
+      ring: "#8C8C8C",
+    },
+    sidebar: {
+      light: {
+        sidebar: "#F2F2F0",
+        sidebarForeground: "#0B0C0E",
+        sidebarPrimary: "#3F666B",
+        sidebarPrimaryForeground: "#FFFFFF",
+        sidebarAccent: "#E4E4E1",
+        sidebarAccentForeground: "#0B0C0E",
+        sidebarSelected: "#DCE9E7",
+        sidebarSelectedForeground: "#3F666B",
+        sidebarIcon: "#626369",
+        sidebarBorder: "#DCDDD9",
+        sidebarRing: "#3F666B",
+      },
+      dark: {
+        sidebar: "#111115",
+        sidebarForeground: "#E5E5E7",
+        sidebarPrimary: "#F4F4F4",
+        sidebarPrimaryForeground: "#101010",
+        sidebarAccent: "#1E1E22",
+        sidebarAccentForeground: "#F4F4F4",
+        sidebarSelected: "#1E1D2C",
+        sidebarSelectedForeground: "#F4F4F4",
+        sidebarIcon: "#C0C0C3",
+        sidebarBorder: "#2A2A2E",
+        sidebarRing: "#B4B4B4",
+      },
+    },
+    typography: {
+      bodyFont: '"Manrope", ui-sans-serif, system-ui, sans-serif',
+      headingFont: '"Manrope", ui-sans-serif, system-ui, sans-serif',
+    },
+    radius: { radius: "0.375rem" },
+    branding: {
+      appName: "LYKOMI UI",
+      appTitle: "LYKOMI UI",
+      faviconUrl: "/favicon.svg",
+      darkFaviconUrl: "/favicon-dark.svg",
+    },
+  },
+};

package/template/vite.config.ts

@@ -33,8 +33,8 @@ export default defineConfig({
         manualChunks(id) {
           if (!id.includes("node_modules")) return;
           // Match on the PACKAGE, not the path: pnpm's store directories
-          // embed peer names ("…foundry-web-ui@…_@ag-ui+client@…_@assistant-u…"),
-          // so a substring match on the full path filed foundry-web-ui under
+          // embed peer names ("…web-ui@…_@ag-ui+client@…_@assistant-u…"),
+          // so a substring match on the full path filed web-ui under
           // whichever peer name the rules met first, and "react" matched
           // half the store. The last node_modules segment is the package.
           const pkg = id.slice(id.lastIndexOf("node_modules/") + "node_modules/".length);
@@ -56,16 +56,16 @@ export default defineConfig({
           if (pkg.startsWith("@ag-ui/")) return "vendor-ag-ui";
           if (pkg.startsWith("@azure/msal")) return "vendor-auth";
           if (
-            pkg.startsWith("@iloveagents/foundry-web-ui/dist/workbench.js") ||
-            pkg.startsWith("@iloveagents/foundry-web-ui/dist/workbench/")
+            pkg.startsWith("@lykomi/web-ui/dist/workbench.js") ||
+            pkg.startsWith("@lykomi/web-ui/dist/workbench/")
           )
-            return "foundry-workbench";
-          if (pkg.startsWith("@iloveagents/foundry-web-ui/")) return "vendor-foundry-ui";
-          if (pkg.startsWith("@iloveagents/foundry-web-shell/")) return "vendor-foundry-shell";
-          if (pkg.startsWith("@iloveagents/foundry-agent/")) return "vendor-foundry-agent";
+            return "lykomi-workbench";
+          if (pkg.startsWith("@lykomi/web-ui/")) return "vendor-lykomi-ui";
+          if (pkg.startsWith("@lykomi/web-shell/")) return "vendor-lykomi-shell";
+          if (pkg.startsWith("@lykomi/agent/")) return "vendor-lykomi-agent";
           // Voice is optional at runtime and heavy at build; its own chunk
           // keeps the main path light and the size gate honest.
-          if (pkg.startsWith("@iloveagents/foundry-web-voice/")) return "vendor-foundry-voice";
+          if (pkg.startsWith("@lykomi/web-voice/")) return "vendor-lykomi-voice";
           // Before the react rule: recharts drags react-smooth + the d3
           // sub-packages along, and "react-smooth" would land in
           // vendor-react and push it past the chunk-size gate.