@postxl/generators 1.12.2 → 1.13.0

package/dist/frontend-actions/generators/ai-assistant-store.generator.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAiAssistantStore = generateAiAssistantStore;
+function generateAiAssistantStore() {
+    return `import { useSyncExternalStore } from 'react'
+import type { ReactNode } from 'react'
+
+export type AiEventKind = 'user' | 'action' | 'assistant' | 'system'
+export type AiEventStatus = 'running' | 'done' | 'error'
+
+export type AiAssistantEvent = {
+  id: string
+  kind: AiEventKind
+  text: string
+  status?: AiEventStatus
+  createdAt: number
+}
+
+export type AiSidepaneTab = {
+  id: string
+  label: string
+  render: () => ReactNode
+}
+
+type AiExecutionResult = {
+  summary?: string
+}
+
+type AiExecutor = (
+  task: string,
+  helpers: {
+    signal: AbortSignal
+    addEvent: (entry: Omit<AiAssistantEvent, 'id' | 'createdAt'>) => string
+    patchEvent: (id: string, patch: Partial<Pick<AiAssistantEvent, 'text' | 'status'>>) => void
+    requestUserInput: (question: string) => Promise<string>
+  },
+) => Promise<AiExecutionResult>
+
+type AiAssistantState = {
+  open: boolean
+  running: boolean
+  pendingQuestion: string | null
+  events: AiAssistantEvent[]
+  tabs: AiSidepaneTab[]
+  activeAdminTab: string
+  executor: AiExecutor | null
+  controller: AbortController | null
+}
+
+type AiAssistantActions = {
+  setOpen: (open: boolean) => void
+  clearEvents: () => void
+  cancel: () => void
+  submit: (task: string) => Promise<void>
+  setExecutor: (executor: AiExecutor | null) => void
+  registerTabs: (...tabs: AiSidepaneTab[]) => void
+  deregisterTabs: (...tabIds: string[]) => void
+  setActiveAdminTab: (tabId: string) => void
+}
+
+type AiAssistantStore = AiAssistantState & { actions: AiAssistantActions }
+
+const listeners = new Set<() => void>()
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+const notify = () => {
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+const setStore = (update: Partial<AiAssistantState>) => {
+  store = { ...store, ...update }
+  notify()
+}
+
+const newId = () => globalThis.crypto?.randomUUID?.() ?? String(Date.now() + Math.random())
+
+const addEvent = (entry: Omit<AiAssistantEvent, 'id' | 'createdAt'>): string => {
+  const id = newId()
+  const next: AiAssistantEvent = { id, createdAt: Date.now(), ...entry }
+  setStore({ events: [...store.events, next] })
+  return id
+}
+
+const patchEvent = (id: string, patch: Partial<Pick<AiAssistantEvent, 'text' | 'status'>>) => {
+  setStore({
+    events: store.events.map((event) => (event.id === id ? { ...event, ...patch } : event)),
+  })
+}
+
+let pendingAnswerResolve: ((answer: string) => void) | null = null
+let pendingAnswerReject: ((error: Error) => void) | null = null
+let pendingSignalAbortUnsubscribe: (() => void) | null = null
+
+const resetPendingInputRequest = () => {
+  pendingAnswerResolve = null
+  pendingAnswerReject = null
+  pendingSignalAbortUnsubscribe?.()
+  pendingSignalAbortUnsubscribe = null
+  if (store.pendingQuestion) {
+    setStore({ pendingQuestion: null })
+  }
+}
+
+const requestUserInput = (question: string, signal: AbortSignal): Promise<string> => {
+  resetPendingInputRequest()
+  setStore({ pendingQuestion: question })
+
+  return new Promise<string>((resolve, reject) => {
+    pendingAnswerResolve = (answer) => {
+      resetPendingInputRequest()
+      resolve(answer)
+    }
+    pendingAnswerReject = (error) => {
+      resetPendingInputRequest()
+      reject(error)
+    }
+
+    const onAbort = () => {
+      pendingAnswerReject?.(new Error('Execution cancelled'))
+    }
+
+    signal.addEventListener('abort', onAbort, { once: true })
+    pendingSignalAbortUnsubscribe = () => signal.removeEventListener('abort', onAbort)
+  })
+}
+
+let store: AiAssistantStore = {
+  open: false,
+  running: false,
+  pendingQuestion: null,
+  events: [],
+  tabs: [],
+  activeAdminTab: 'ai',
+  executor: null,
+  controller: null,
+  actions: {} as AiAssistantActions,
+}
+
+store.actions = {
+  setOpen(open) {
+    setStore({ open })
+  },
+
+  clearEvents() {
+    setStore({ events: [] })
+  },
+
+  cancel() {
+    pendingAnswerReject?.(new Error('Execution cancelled'))
+    store.controller?.abort()
+    setStore({ running: false, controller: null, pendingQuestion: null })
+  },
+
+  async submit(task) {
+    const trimmed = task.trim()
+    if (!trimmed) {
+      return
+    }
+
+    if (store.running && store.pendingQuestion) {
+      addEvent({ kind: 'user', text: trimmed })
+      pendingAnswerResolve?.(trimmed)
+      return
+    }
+
+    if (store.running || !store.executor) {
+      return
+    }
+
+    const controller = new AbortController()
+    setStore({ running: true, open: true, controller })
+
+    addEvent({ kind: 'user', text: trimmed })
+
+    try {
+      const result = await store.executor(trimmed, {
+        signal: controller.signal,
+        addEvent,
+        patchEvent,
+        requestUserInput: (question) => requestUserInput(question, controller.signal),
+      })
+
+      if (result.summary) {
+        addEvent({ kind: 'assistant', text: result.summary, status: 'done' })
+      }
+    } catch (error) {
+      if (controller.signal.aborted) {
+        addEvent({ kind: 'system', text: 'Execution cancelled.' })
+      } else {
+        addEvent({ kind: 'assistant', text: String(error), status: 'error' })
+      }
+    } finally {
+      resetPendingInputRequest()
+      setStore({ running: false, controller: null, pendingQuestion: null })
+    }
+  },
+
+  setExecutor(executor) {
+    setStore({ executor })
+  },
+
+  registerTabs(...tabs) {
+    const incoming = new Set(tabs.map((tab) => tab.id))
+    const next = [...store.tabs.filter((tab) => !incoming.has(tab.id)), ...tabs]
+    setStore({ tabs: next })
+  },
+
+  deregisterTabs(...tabIds) {
+    const toRemove = new Set(tabIds)
+    setStore({ tabs: store.tabs.filter((tab) => !toRemove.has(tab.id)) })
+  },
+
+  setActiveAdminTab(tabId) {
+    setStore({ activeAdminTab: tabId })
+  },
+}
+
+export const useAiAssistantState = <T>(selector: (state: AiAssistantState) => T): T =>
+  useSyncExternalStore(subscribe, () => selector(store), () => selector(store))
+
+export const useAiAssistantActions = (): AiAssistantActions =>
+  useSyncExternalStore(subscribe, () => store.actions, () => store.actions)
+`;
+}
+//# sourceMappingURL=ai-assistant-store.generator.js.map

package/dist/frontend-actions/generators/ai-assistant-store.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-assistant-store.generator.js","sourceRoot":"","sources":["../../../src/frontend-actions/generators/ai-assistant-store.generator.ts"],"names":[],"mappings":";;AAAA,4DAiOC;AAjOD,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+NR,CAAA;AACD,CAAC"}

package/dist/frontend-actions/generators/ai-sidebar-content.generator.d.ts

@@ -0,0 +1 @@
+export declare function generateAiSidebarContent(): string;

package/dist/frontend-actions/generators/ai-sidebar-content.generator.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAiSidebarContent = generateAiSidebarContent;
+function generateAiSidebarContent() {
+    return `import { BotIcon, SparklesIcon } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+
+import { Button, Textarea } from '@postxl/ui-components'
+
+import { AiAssistantEvent, useAiAssistantActions, useAiAssistantState } from './ai-assistant-store'
+
+const EventBubble = ({ event }: { event: AiAssistantEvent }) => {
+  if (event.kind === 'user') {
+    return (
+      <div className="flex justify-end">
+        <div className="max-w-[85%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground">{event.text}</div>
+      </div>
+    )
+  }
+
+  if (event.kind === 'action') {
+    let statusClass = 'border-muted bg-muted/30 text-foreground'
+    if (event.status === 'running') {
+      statusClass = 'border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-200'
+    } else if (event.status === 'error') {
+      statusClass = 'border-red-300 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200'
+    }
+
+    return (
+      <div className="flex justify-start">
+        <div className={\`max-w-[95%] rounded-lg border px-3 py-2 text-xs \${statusClass}\`}>
+          <div className="flex items-center gap-2">
+            <SparklesIcon className={event.status === 'running' ? 'size-3 animate-pulse' : 'size-3'} />
+            <span className="font-medium">Agent Action</span>
+          </div>
+          <div className="mt-1">{event.text}</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (event.kind === 'assistant') {
+    return (
+      <div className="flex justify-start">
+        <div className="max-w-[90%] rounded-lg border bg-card px-3 py-2 text-sm">
+          <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground">
+            <BotIcon className="size-3" />
+            Assistant
+          </div>
+          <div>{event.text}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return <div className="text-center text-xs text-muted-foreground">{event.text}</div>
+}
+
+export const AiSidebarContent = () => {
+  const events = useAiAssistantState((state) => state.events)
+  const running = useAiAssistantState((state) => state.running)
+  const pendingQuestion = useAiAssistantState((state) => state.pendingQuestion)
+  const { cancel, clearEvents, submit } = useAiAssistantActions()
+
+  const [prompt, setPrompt] = useState('')
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (el) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [events, running])
+
+  const handleSubmit = () => {
+    const trimmed = prompt.trim()
+    if (!trimmed) {
+      return
+    }
+
+    setPrompt('')
+    void submit(trimmed)
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex items-center justify-between border-b px-3 py-2">
+        <p className="text-xs font-medium text-muted-foreground">AI Assistant</p>
+        <Button variant="ghost" size="sm" onClick={clearEvents} disabled={running}>
+          Clear
+        </Button>
+      </div>
+
+      <div ref={scrollRef} className="min-h-0 flex-1 space-y-2 overflow-y-auto px-3 py-3">
+          {events.length === 0 && (
+            <p className="text-sm text-muted-foreground">Ask for navigation, filtering, or data insights.</p>
+          )}
+
+          {events.map((event) => (
+            <EventBubble key={event.id} event={event} />
+          ))}
+      </div>
+
+      <div className="space-y-2 border-t p-3">
+        <Textarea
+          value={prompt}
+          onChange={(event) => setPrompt(event.target.value)}
+          placeholder={pendingQuestion ?? 'Ask the assistant...'}
+          className="min-h-[90px] resize-none"
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !event.metaKey && !event.ctrlKey) {
+              event.preventDefault()
+              handleSubmit()
+            }
+          }}
+        />
+
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-muted-foreground">
+            {pendingQuestion ? 'Assistant is waiting for your answer' : 'Press Enter to send, Ctrl/Cmd + Enter for a new line'}
+          </p>
+          <div className="flex gap-2">
+            {running && (
+              <Button variant="outline" size="sm" onClick={cancel}>
+                Stop
+              </Button>
+            )}
+            <Button size="sm" onClick={handleSubmit} disabled={(!pendingQuestion && running) || !prompt.trim()}>
+              {pendingQuestion ? 'Reply' : 'Send'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+`;
+}
+//# sourceMappingURL=ai-sidebar-content.generator.js.map

package/dist/frontend-actions/generators/ai-sidebar-content.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-sidebar-content.generator.js","sourceRoot":"","sources":["../../../src/frontend-actions/generators/ai-sidebar-content.generator.ts"],"names":[],"mappings":";;AAAA,4DAsIC;AAtID,SAAgB,wBAAwB;IACtC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIR,CAAA;AACD,CAAC"}

package/dist/frontend-actions/generators/ai-sidepane.generator.d.ts

@@ -0,0 +1 @@
+export declare function generateAiSidepane(): string;

package/dist/frontend-actions/generators/ai-sidepane.generator.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAiSidepane = generateAiSidepane;
+function generateAiSidepane() {
+    return `import { Component, type ErrorInfo, type PropsWithChildren, useMemo } from 'react'
+import { useLocation } from '@tanstack/react-router'
+
+import { Sheet, SheetContent, SheetHeader, SheetTitle, Tabs, TabsContent, TabsList, TabsTrigger } from '@postxl/ui-components'
+
+import { APP_CONFIG } from '@lib/config'
+import { useAiAssistantActions, useAiAssistantState } from './ai-assistant-store'
+import { AiSidebarContent } from './ai-sidebar-content'
+
+type AiSidepaneErrorBoundaryState = {
+  hasError: boolean
+}
+
+class AiSidepaneErrorBoundary extends Component<PropsWithChildren, AiSidepaneErrorBoundaryState> {
+  public constructor(props: PropsWithChildren) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  public static getDerivedStateFromError(): AiSidepaneErrorBoundaryState {
+    return { hasError: true }
+  }
+
+  public componentDidCatch(error: unknown, info: ErrorInfo) {
+    console.error('AiSidepane rendering failed:', error, info)
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+export const AiSidepane = () => {
+  return (
+    <AiSidepaneErrorBoundary>
+      <AiSidepaneInner />
+    </AiSidepaneErrorBoundary>
+  )
+}
+
+const AiSidepaneInner = () => {
+  const pathname = useLocation({ select: (location) => location.pathname })
+  const open = useAiAssistantState((state) => state.open)
+  const tabs = useAiAssistantState((state) => state.tabs)
+  const { setOpen } = useAiAssistantActions()
+
+  const isAdminRoute = pathname.startsWith('/admin')
+  const isAdminOverviewRoute = pathname === '/admin' || pathname === '/admin/'
+
+  const allTabs = useMemo(
+    () => [
+      { id: 'ai', label: 'AI', render: () => <AiSidebarContent /> },
+      ...tabs,
+    ],
+    [tabs],
+  )
+
+  if (!APP_CONFIG.enableAI || (isAdminRoute && !isAdminOverviewRoute)) {
+    return null
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent side="right" className="w-full p-0 sm:max-w-xl">
+        <SheetHeader className="border-b px-4 py-3">
+          <SheetTitle>Assistant</SheetTitle>
+        </SheetHeader>
+
+        <Tabs defaultValue={allTabs[0]?.id} className="flex h-[calc(100%-56px)] min-h-0 flex-col">
+          <TabsList variant="protocol" className="mx-2 mt-2 justify-start">
+            {allTabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id} variant="protocol" className="cursor-pointer px-3 h-8">
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {allTabs.map((tab) => (
+            <TabsContent key={tab.id} value={tab.id} className="mt-0 h-full min-h-0 flex-1">
+              {tab.render()}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  )
+}
+`;
+}
+//# sourceMappingURL=ai-sidepane.generator.js.map

package/dist/frontend-actions/generators/ai-sidepane.generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-sidepane.generator.js","sourceRoot":"","sources":["../../../src/frontend-actions/generators/ai-sidepane.generator.ts"],"names":[],"mappings":";;AAAA,gDA6FC;AA7FD,SAAgB,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FR,CAAA;AACD,CAAC"}

package/dist/frontend-actions/generators/base-global-actions.generator.d.ts

@@ -0,0 +1 @@
+export declare function generateBaseGlobalActions(): string;