@drawnagency/primitives 0.1.84 → 0.1.87

package/src/components/shell/ChatbotConfigModal.tsx

@@ -1,193 +0,0 @@
-import { useEffect, useState } from "react";
-import { EditorModal } from "./EditorModal";
-import { Button } from "../shared/Button";
-import { cn } from "../../lib/cn";
-import ChatPanel from "../chat/ChatPanel";
-import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
-import type { Audience } from "../../auth/types";
-import { audiencePasses } from "../../lib/pages";
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  siteConfig: SiteConfig;
-  onSiteConfigChange: (config: SiteConfig) => void;
-  audiences: Audience[];
-  platformEnabled: boolean;
-}
-
-function slugify(label: string): string {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "task";
-}
-
-function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[]; selected: string[]; onToggle: (name: string) => void }) {
-  return (
-    <div className="flex flex-wrap gap-1">
-      {audiences.map((a) => (
-        <button key={a.name} type="button" onClick={() => onToggle(a.name)}
-          className={cn("rounded-full border px-2 py-0.5 text-xs",
-            selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
-          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color } : undefined}>
-          {a.displayName}
-        </button>
-      ))}
-      {audiences.length === 0 && <span className="text-xs text-base-contrast-light">No audiences configured</span>}
-    </div>
-  );
-}
-
-export function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigChange, audiences, platformEnabled }: Props) {
-  const chatbot = siteConfig.chatbot;
-  const [newTaskLabel, setNewTaskLabel] = useState("");
-  const [showTest, setShowTest] = useState(false);
-  const [previewAudience, setPreviewAudience] = useState("");
-
-  // A deselected audience can no longer chat — never keep simulating it.
-  useEffect(() => {
-    if (previewAudience && !chatbot.audiences.includes(previewAudience)) setPreviewAudience("");
-  }, [previewAudience, chatbot.audiences]);
-
-  const patch = (p: Partial<ChatbotConfig>) =>
-    onSiteConfigChange({ ...siteConfig, chatbot: { ...chatbot, ...p } });
-
-  const patchTask = (i: number, p: Partial<ChatbotTask>) =>
-    patch({ tasks: chatbot.tasks.map((t, idx) => (idx === i ? { ...t, ...p } : t)) });
-
-  function addTask() {
-    const label = newTaskLabel.trim();
-    if (!label || chatbot.tasks.length >= 20) return;
-    let id = slugify(label);
-    if (chatbot.tasks.some((t) => t.id === id)) {
-      for (let n = 2; ; n++) {
-        const suffix = `-${n}`;
-        const candidate = `${id.slice(0, 32 - suffix.length)}${suffix}`;
-        if (!chatbot.tasks.some((t) => t.id === candidate)) {
-          id = candidate;
-          break;
-        }
-      }
-    }
-    patch({ tasks: [...chatbot.tasks, { id, label, prompt: "", access: [] }] });
-    setNewTaskLabel("");
-  }
-
-  const toggleName = (list: string[], name: string) =>
-    list.includes(name) ? list.filter((n) => n !== name) : [...list, name];
-
-  // Record lookups can hit inherited Object.prototype members ("constructor"
-  // is a legal audience name) — treat anything non-string as absent.
-  const overlayValue = (name: string) => {
-    const v = chatbot.audiencePrompts[name];
-    return typeof v === "string" ? v : "";
-  };
-
-  return (
-    <EditorModal isOpen={isOpen} onClose={onClose} title="Chatbot" size="settings" noPadding>
-      <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-4">
-        {!platformEnabled && (
-          <div className="rounded border border-base-200 bg-base-accent px-3 py-2 text-sm text-base-contrast">
-            Chat is not enabled for this site — contact Drawn Agency. You can still edit the
-            configuration below; it activates when chat is switched on.
-          </div>
-        )}
-
-        <label className="flex items-center gap-2 text-sm text-base-contrast">
-          <input type="checkbox" aria-label="Enable chatbot" checked={chatbot.enabled}
-            className="h-5 w-5 cursor-pointer accent-primary"
-            onChange={(e) => patch({ enabled: e.target.checked })} />
-          Show the chat widget to viewers
-        </label>
-
-        <div>
-          <p className="mb-1 text-sm font-medium text-base-contrast">Audiences</p>
-          <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget — only the selected audiences; none selected means no one.</p>
-          <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
-          {chatbot.audiences.map((name) => (
-            <div key={name} className="mt-2">
-              <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
-                Additional guidance for {name}
-              </label>
-              <textarea id={`audience-prompt-${name}`} aria-label={`Guidance for ${name}`} rows={2} maxLength={8000}
-                value={overlayValue(name)}
-                onChange={(e) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: e.target.value } })}
-                placeholder={`Only ${name} sees answers shaped by this — safe for ${name}-level info.`}
-                className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-            </div>
-          ))}
-        </div>
-
-        <div>
-          <label htmlFor="chatbot-system-prompt" className="mb-1 block text-sm font-medium text-base-contrast">System prompt</label>
-          <textarea id="chatbot-system-prompt" aria-label="System prompt" rows={5} maxLength={8000}
-            value={chatbot.systemPrompt}
-            onChange={(e) => patch({ systemPrompt: e.target.value })}
-            placeholder="Describe the brand's voice and how the assistant should behave — e.g. “Speak warmly and concisely; always reference our color names, never hex codes.”"
-            className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
-          <p className="text-right text-xs text-base-contrast-light">{chatbot.systemPrompt.length}/8000</p>
-        </div>
-
-        <div>
-          <p className="mb-1 text-sm font-medium text-base-contrast">Tasks</p>
-          <p className="mb-2 text-xs text-base-contrast-light">Goal presets shown as a dropdown in the widget. Each task layers its own instructions onto the system prompt.</p>
-          <div className="space-y-3">
-            {chatbot.tasks.map((t, i) => (
-              <div key={t.id} className="rounded border border-base-200 p-2">
-                <div className="mb-1 flex items-center justify-between gap-2">
-                  <input aria-label={`Task ${t.id} label`} value={t.label} maxLength={60}
-                    onChange={(e) => patchTask(i, { label: e.target.value })}
-                    className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
-                  <Button type="button" variant="destructive"
-                    onClick={() => patch({ tasks: chatbot.tasks.filter((_, idx) => idx !== i) })}>
-                    Remove
-                  </Button>
-                </div>
-                <textarea aria-label={`Task ${t.id} prompt`} rows={2} maxLength={4000} value={t.prompt}
-                  onChange={(e) => patchTask(i, { prompt: e.target.value })}
-                  placeholder="Instructions for this task…"
-                  className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm" />
-                <AudienceChips audiences={audiences} selected={t.access} onToggle={(n) => patchTask(i, { access: toggleName(t.access, n) })} />
-              </div>
-            ))}
-          </div>
-          <div className="mt-2 flex gap-2">
-            <input aria-label="New task label" value={newTaskLabel} maxLength={60}
-              onChange={(e) => setNewTaskLabel(e.target.value)}
-              placeholder="e.g. Draft a social post"
-              className="min-w-0 flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm" />
-            <Button type="button" onClick={addTask}>Add task</Button>
-          </div>
-        </div>
-
-        <div>
-          <Button type="button" onClick={() => setShowTest((s) => !s)} disabled={!platformEnabled}>
-            {showTest ? "Hide test chat" : "Test with current draft"}
-          </Button>
-          <p className="mt-1 text-xs text-base-contrast-light">
-            Tests your unsaved prompt and tasks. Answers ground on published content.
-          </p>
-          {showTest && platformEnabled && (
-            <label className="mt-2 flex items-center gap-2 text-xs text-base-contrast">
-              Preview as
-              <select aria-label="Preview as" value={previewAudience} onChange={(e) => setPreviewAudience(e.target.value)}
-                className="rounded border border-base-200 bg-base-accent px-1 py-0.5 text-xs">
-                <option value="">Editor (base prompt only)</option>
-                {chatbot.audiences.map((n) => <option key={n} value={n}>{n}</option>)}
-              </select>
-              <span className="text-base-contrast-light">Prompt and task preview only — grounding stays editor-wide.</span>
-            </label>
-          )}
-          {showTest && platformEnabled && (
-            <ChatPanel
-              open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
-              tasks={chatbot.tasks
-                .filter((t) => previewAudience === "" || audiencePasses(t.access, previewAudience))
-                .map((t) => ({ id: t.id, label: t.label }))}
-              isEditor draftChatbot={chatbot}
-              simulateAudience={previewAudience || undefined}
-            />
-          )}
-        </div>
-      </div>
-    </EditorModal>
-  );
-}