"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