@fluxy-chat/create-fluxy-chat 0.3.0 → 0.5.0

package/templates/full/src/index.css

@@ -0,0 +1,242 @@
+:root {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  color: #0f172a;
+  background: #fdfbf9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.shell {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+.hero {
+  margin-bottom: 1rem;
+}
+
+.hero h1 {
+  font-size: 1.35rem;
+  margin: 0 0 0.35rem;
+}
+
+.hero p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.hero a {
+  color: #c2410c;
+}
+
+.layout {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr 240px;
+    align-items: start;
+  }
+}
+
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 520px;
+  border: 1px solid #e7e5e4;
+  border-radius: 16px;
+  background: #fff;
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgb(15 23 42 / 6%);
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e7e5e4;
+  background: #0f172a;
+  color: #fff;
+}
+
+.status {
+  font-size: 0.75rem;
+  opacity: 0.85;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.6rem 0.85rem;
+  border-radius: 10px;
+  background: #f8fafc;
+  max-width: 85%;
+}
+
+.message.self {
+  align-self: flex-end;
+  background: #fff7ed;
+  border: 1px solid #fed7aa;
+}
+
+.message.agent {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+}
+
+.author {
+  font-size: 0.7rem;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.composer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid #e7e5e4;
+}
+
+.composer-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.composer input {
+  flex: 1;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 0.55rem 0.75rem;
+}
+
+.composer button {
+  border: none;
+  border-radius: 10px;
+  background: #c2410c;
+  color: #fff;
+  padding: 0.55rem 1rem;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.composer button.secondary {
+  background: #0f172a;
+}
+
+.composer button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.hint {
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+.tools {
+  margin: 0 1rem 1rem;
+  padding: 0.75rem;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.tools h3 {
+  margin: 0 0 0.5rem;
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.tools ul {
+  margin: 0;
+  padding-left: 1rem;
+  font-size: 0.8rem;
+}
+
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.card {
+  border: 1px solid #e7e5e4;
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  background: #fff;
+  font-size: 0.8rem;
+}
+
+.card h2 {
+  margin: 0 0 0.5rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #64748b;
+}
+
+.card dl {
+  margin: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.card dt {
+  color: #94a3b8;
+  font-size: 0.7rem;
+}
+
+.card dd {
+  margin: 0;
+  word-break: break-all;
+}
+
+.card a {
+  color: #c2410c;
+}
+
+.error-box {
+  border: 1px solid #fecaca;
+  background: #fef2f2;
+  color: #991b1b;
+  border-radius: 12px;
+  padding: 1rem;
+  font-size: 0.875rem;
+}
+
+.error-box code {
+  font-size: 0.8rem;
+}
+
+.typing {
+  padding: 0 1rem 0.5rem;
+  font-size: 0.75rem;
+  color: #64748b;
+}

package/templates/full/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/full/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FLUXYCHAT_WORKER_URL: string;
+  readonly VITE_FLUXYCHAT_MEMBER_JWT: string;
+  readonly VITE_FLUXYCHAT_ROOM_ID: string;
+  readonly VITE_FLUXYCHAT_AGENT_ID: string;
+  readonly VITE_FLUXYCHAT_AGENT_HANDLE: string;
+  readonly VITE_FLUXYCHAT_PROJECT_ID: string;
+  readonly VITE_FLUXYCHAT_CONSOLE_URL: string;
+  readonly VITE_FLUXYCHAT_USER_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/full/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/full/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173, open: true },
+});

package/templates/hr-feedback/.env.example

@@ -0,0 +1,9 @@
+# FluxyChat worker URL + service API key (server-side only)
+FLUXY_BASE_URL=https://your-fluxychat-worker.example.com
+FLUXY_API_KEY=your-api-key-here
+
+# Optional dedicated room for aggregated summaries
+HR_FEEDBACK_ROOM_ID=hr-anonymous-feedback
+
+# Optional webhook for Path B HR escalation (de-identified payload only)
+HR_ESCALATION_WEBHOOK_URL=

package/templates/hr-feedback/README.md

@@ -0,0 +1,45 @@
+# HR Anonymous Feedback Starter
+
+Production starter for anonymous employee feedback with sensitive classification and privacy-safe audit.
+
+## Features
+
+- **Path A** — routine feedback → aggregated anonymous summary room
+- **Path B** — sensitive categories → HR escalation hook (category + confidence only, no identity)
+- Reuses FluxyChat `approvalChain` + room timeline audit when wired to agent tools
+- Classification runs on the worker via `POST /anonymous-feedback`
+
+## Quick start
+
+```bash
+cp .env.example .dev.vars
+# fill FLUXY_BASE_URL + FLUXY_API_KEY
+npm install
+npm run dev
+```
+
+Submit feedback:
+
+```bash
+curl -X POST http://localhost:8787/feedback \
+  -H "Content-Type: application/json" \
+  -d '{"content":"My manager makes hostile comments in meetings"}'
+```
+
+## Endpoints
+
+| Route | Description |
+| --- | --- |
+| `GET /` | Health check |
+| `POST /feedback` | Anonymous submission (no user id stored) |
+
+## Privacy
+
+- Raw message content is **not** persisted by this template
+- Worker audit stores **category + timestamp + path** only
+- Configure `HR_ESCALATION_WEBHOOK_URL` for your HRIS / ticketing integration
+
+## Learn more
+
+- [FluxyChat docs](https://github.com/AlessandroFare/fluxychat)
+- Worker route: `POST /anonymous-feedback` (JWT) for in-app widgets

package/templates/hr-feedback/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "hr-feedback-bot",
+  "version": "1.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fluxy-chat/sdk": "latest"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.0.0",
+    "typescript": "^5.6.0",
+    "wrangler": "^3.0.0"
+  }
+}

package/templates/hr-feedback/src/feedback.ts

@@ -0,0 +1,71 @@
+interface FeedbackEnv {
+  FLUXY_BASE_URL: string;
+  FLUXY_API_KEY: string;
+  HR_FEEDBACK_ROOM_ID?: string;
+  HR_ESCALATION_WEBHOOK_URL?: string;
+}
+
+interface FeedbackBody {
+  content?: string;
+  roomId?: string;
+}
+
+export interface FeedbackResult {
+  ok: boolean;
+  path?: string;
+  category?: string;
+  confidence?: number;
+  message?: string;
+  error?: string;
+}
+
+/**
+ * Submit anonymous feedback through the FluxyChat worker classifier.
+ * Content is classified server-side; only metadata is returned.
+ */
+export async function submitHrFeedback(
+  env: FeedbackEnv,
+  body: FeedbackBody,
+): Promise<FeedbackResult> {
+  const content = String(body.content ?? "").trim();
+  if (!content) return { ok: false, error: "content required" };
+  if (content.length > 8000) return { ok: false, error: "content_too_long" };
+
+  const baseUrl = env.FLUXY_BASE_URL.replace(/\/$/, "");
+  const res = await fetch(`${baseUrl}/anonymous-feedback`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${env.FLUXY_API_KEY}`,
+    },
+    body: JSON.stringify({
+      content,
+      roomId: body.roomId ?? env.HR_FEEDBACK_ROOM_ID ?? null,
+    }),
+  });
+
+  const data = (await res.json().catch(() => ({}))) as FeedbackResult;
+  if (!res.ok) {
+    return { ok: false, error: data.error ?? `worker_${res.status}` };
+  }
+
+  if (data.path === "hr_escalation" && env.HR_ESCALATION_WEBHOOK_URL) {
+    await fetch(env.HR_ESCALATION_WEBHOOK_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        category: data.category,
+        confidence: data.confidence,
+        at: new Date().toISOString(),
+      }),
+    }).catch(() => undefined);
+  }
+
+  return {
+    ok: true,
+    path: data.path,
+    category: data.category,
+    confidence: data.confidence,
+    message: data.message,
+  };
+}

package/templates/hr-feedback/src/index.ts

@@ -0,0 +1,22 @@
+import { submitHrFeedback } from "./feedback.js";
+
+export default {
+  async fetch(request: Request, env: Record<string, string>): Promise<Response> {
+    const url = new URL(request.url);
+
+    if (url.pathname === "/" && request.method === "GET") {
+      return new Response("HR anonymous feedback bot is running.", { status: 200 });
+    }
+
+    if (url.pathname === "/feedback" && request.method === "POST") {
+      const body = (await request.json().catch(() => ({}))) as {
+        content?: string;
+        roomId?: string;
+      };
+      const result = await submitHrFeedback(env, body);
+      return Response.json(result, { status: result.ok ? 200 : 400 });
+    }
+
+    return new Response("Not Found", { status: 404 });
+  },
+};

package/templates/hr-feedback/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "types": ["@cloudflare/workers-types"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/hr-feedback/wrangler.toml

@@ -0,0 +1,7 @@
+name = "hr-feedback-bot"
+main = "src/index.ts"
+compatibility_date = "2024-12-01"
+
+[vars]
+FLUXY_BASE_URL = "https://your-fluxychat-worker.example.com"
+HR_FEEDBACK_ROOM_ID = "hr-anonymous-feedback"

package/templates/minimal/README.md

@@ -1,6 +1,6 @@
 # FluxyChat minimal starter
 
-Three-line chat widget — no platform modules in the generated project.
+Three-line chat widget with no platform modules in the generated project.
 
 ```bash
 cp .env.example .env

package/templates/react/.env.example

@@ -1,8 +1,9 @@
 # FluxyChat worker URL (hosted or self-hosted)
 VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.workers.dev
 
-# Member JWT from POST /auth/token or onboarding wizard
+# Option A — member JWT (~2 min via onboarding)
 VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
-
-# Demo room — create in console or onboarding
 VITE_FLUXYCHAT_ROOM_ID=demo
+
+# Option B — public guest room (~60s, no signup)
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/react/README.md

@@ -1,22 +1,32 @@
 # FluxyChat React starter
 
-Minimal Vite + React app with `useChat` — first message in minutes.
+Minimal Vite + React app with `useChat`. First message in about 60 seconds via the public guest room.
 
-## Quick start
+## Quick start (guest, fastest)
 
 ```bash
 cp .env.example .env
-# Edit .env with your Worker URL + member JWT
+# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_PUBLIC_ROOM_ID (public room from console)
 npm install
 npm run dev
 ```
 
-Open http://localhost:5173 and send a message.
+Open http://localhost:5173. A guest JWT is minted automatically via `joinPublicRoomAsGuest`.
+
+## Quick start (member JWT)
+
+```bash
+cp .env.example .env
+# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_MEMBER_JWT + VITE_FLUXYCHAT_ROOM_ID
+npm install
+npm run dev
+```
 
 ## Get credentials
 
-1. **Hosted:** [fluxychat.com/onboarding](https://fluxychat.com/onboarding) → copy Worker URL + JWT
-2. **Local monorepo:** `pnpm run first-message` from the FluxyChat repo
+1. **Guest:** create a **public** room in console, copy room ID, set `VITE_FLUXYCHAT_PUBLIC_ROOM_ID`
+2. **Member:** [fluxychat.com/onboarding](https://fluxychat.com/onboarding) for Worker URL and JWT
+3. **Local monorepo:** `pnpm run first-message` from the FluxyChat repo
 
 ## Scripts
 
@@ -28,6 +38,6 @@ Open http://localhost:5173 and send a message.
 
 ## Next steps
 
-- Add `@fluxy-chat/ui` for polished message bubbles
+- Add `@fluxy-chat/ui` themes (`default`, `dark`, `minimal`, `brand`)
 - Use `useInbox` for unified feed
 - See [chat-only quickstart](https://docs.fluxychat.com/docs/getting-started/chat-only-quickstart)