Prompt Library

"use client"

import * as React from "react"

import {
  PromptLibrary,
  PromptLibrarySkeleton,
  type Prompt,
  type PromptDraft,
  type PromptFolder,
} from "@/components/blocks/prompt-library/prompt-library"

async function request<T>(input: string, init?: RequestInit) {
  const response = await fetch(input, {
    ...init,
    headers: { "content-type": "application/json", ...init?.headers },
  })
  if (!response.ok) {
    const body = (await response.json().catch(() => ({}))) as { error?: string }
    throw new Error(body.error ?? "Something went wrong.")
  }
  return (response.status === 204 ? null : await response.json()) as T
}

export function PromptsPage({ onInsert }: { onInsert: (text: string) => void }) {
  const [prompts, setPrompts] = React.useState<Prompt[] | null>(null)
  const [folders, setFolders] = React.useState<PromptFolder[]>([])

  React.useEffect(() => {
    request<{ prompts: Prompt[]; folders: PromptFolder[] }>("/api/prompts").then((data) => {
      setPrompts(data.prompts)
      setFolders(data.folders)
    })
  }, [])

  const replace = (saved: Prompt) =>
    setPrompts((current) => {
      const list = current ?? []
      return list.some((prompt) => prompt.id === saved.id)
        ? list.map((prompt) => (prompt.id === saved.id ? saved : prompt))
        : [saved, ...list]
    })

  const save = async (draft: PromptDraft) => {
    const saved = await request<Prompt>(draft.id ? `/api/prompts/${draft.id}` : "/api/prompts", {
      method: draft.id ? "PUT" : "POST",
      body: JSON.stringify(draft),
    })
    replace(saved)
    return saved
  }

  const patch = async (prompt: Prompt, body: Partial<Prompt>) =>
    replace(await request<Prompt>(`/api/prompts/${prompt.id}`, { method: "PATCH", body: JSON.stringify(body) }))

  if (!prompts) return <PromptLibrarySkeleton />

  return (
    <PromptLibrary
      className="h-svh"
      prompts={prompts}
      folders={folders}
      onSave={save}
      onDelete={async (prompt) => {
        await request(`/api/prompts/${prompt.id}`, { method: "DELETE" })
        setPrompts((current) => current?.filter((item) => item.id !== prompt.id) ?? null)
      }}
      onMove={(prompt, folder) => patch(prompt, { folder })}
      onFavorite={(prompt, favorite) => patch(prompt, { favorite })}
      onUse={(prompt, { text }) => {
        onInsert(text)
        void patch(prompt, { lastUsedAt: new Date().toISOString() })
      }}
    />
  )
}

"use client"

import { IconTrash } from "@tabler/icons-react"

import {
  PromptInput,
  PromptInputActions,
  PromptInputBody,
  PromptInputSubmit,
  PromptInputTextarea,
  type PromptMessage,
} from "../prompt-input/prompt-input"
import type { PromptMenuItem } from "../prompt-input/prompt-menu"
import type { Prompt } from "@/components/blocks/prompt-library/prompt-library"
import { PromptLibraryMenu } from "@/components/blocks/prompt-library/prompt-library-menu"

const commands: PromptMenuItem[] = [
  { value: "clear", label: "clear", description: "Start a new chat", icon: <IconTrash />, insert: "" },
]

export function Composer({
  prompts,
  onSend,
  onClear,
  onModelChange,
}: {
  prompts: Prompt[]
  onSend: (message: PromptMessage) => void
  onClear: () => void
  onModelChange: (model: string) => void
}) {
  return (
    <PromptInput onSubmit={onSend}>
      <PromptInputBody>
        <PromptInputTextarea placeholder="Ask anything. Type / for saved prompts" />
        <PromptInputActions>
          <PromptInputSubmit />
        </PromptInputActions>
      </PromptInputBody>
      <PromptLibraryMenu
        prompts={prompts}
        items={commands}
        onSelect={(item) => {
          if (item.value === "clear") onClear()
        }}
        onUse={(prompt) => {
          if (prompt.model) onModelChange(prompt.model)
        }}
      />
    </PromptInput>
  )
}

"use client"

import type { Prompt, PromptDraft, PromptFolder } from "@/components/blocks/prompt-library/prompt-library"
import { PromptLibrary } from "@/components/blocks/prompt-library/prompt-library"

type Role = "owner" | "editor" | "viewer"

type TeamPrompt = Prompt & { ownerId: string; teamId: string | null }

function withPermissions(prompts: TeamPrompt[], userId: string, role: Role): Prompt[] {
  return prompts.map((prompt) => ({
    ...prompt,
    shared: prompt.teamId !== null,
    canEdit: prompt.ownerId === userId || (prompt.teamId !== null && role !== "viewer"),
  }))
}

export function TeamPrompts({
  prompts,
  folders,
  userId,
  role,
  onSave,
  onDelete,
  onUse,
}: {
  prompts: TeamPrompt[]
  folders: PromptFolder[]
  userId: string
  role: Role
  onSave: (draft: PromptDraft) => Promise<Prompt>
  onDelete: (prompt: Prompt) => Promise<void>
  onUse: (text: string) => void
}) {
  return (
    <PromptLibrary
      prompts={withPermissions(prompts, userId, role)}
      folders={folders}
      readOnly={role === "viewer"}
      onSave={onSave}
      onDelete={onDelete}
      onUse={(_, { text }) => onUse(text)}
    />
  )
}