NotionPromptForm() — ui Function Reference

Architecture documentation for the NotionPromptForm() function in notion-prompt-form.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ NotionPromptForm() — ui Function Reference

Dependency Diagram

graph TD
  3b579795_5db6_7321_5e7c_1029ea0c8e2a["NotionPromptForm()"]
  61021ec3_d6bc_49a1_6c65_d1ba758528c3["notion-prompt-form.tsx"]
  3b579795_5db6_7321_5e7c_1029ea0c8e2a -->|defined in| 61021ec3_d6bc_49a1_6c65_d1ba758528c3
  style 3b579795_5db6_7321_5e7c_1029ea0c8e2a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx lines 157–516

export function NotionPromptForm() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]

  const SAMPLE_DATA = useMemo(
    () => ({
      mentionable: [
        { type: "page", title: t.meetingNotes, image: "📝" },
        { type: "page", title: t.projectDashboard, image: "📊" },
        { type: "page", title: t.ideasBrainstorming, image: "💡" },
        { type: "page", title: t.calendarEvents, image: "📅" },
        { type: "page", title: t.documentation, image: "📚" },
        { type: "page", title: t.goalsObjectives, image: "🎯" },
        { type: "page", title: t.budgetPlanning, image: "💰" },
        { type: "page", title: t.teamDirectory, image: "👥" },
        { type: "page", title: t.technicalSpecs, image: "🔧" },
        { type: "page", title: t.analyticsReport, image: "📈" },
        {
          type: "user",
          title: "shadcn",
          image: "https://github.com/shadcn.png",
          workspace: t.workspace,
        },
        {
          type: "user",
          title: "maxleiter",
          image: "https://github.com/maxleiter.png",
          workspace: t.workspace,
        },
        {
          type: "user",
          title: "evilrabbit",
          image: "https://github.com/evilrabbit.png",
          workspace: t.workspace,
        },
      ],
      models: [
        { name: t.auto },
        { name: t.agentMode, badge: t.beta },
        { name: t.planMode },
      ],
    }),
    [t]
  )

  const [mentions, setMentions] = useState<string[]>([])
  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
  const [selectedModel, setSelectedModel] = useState<
    (typeof SAMPLE_DATA.models)[0]
  >(SAMPLE_DATA.models[0])
  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)

  const grouped = useMemo(() => {
    return SAMPLE_DATA.mentionable.reduce(
      (acc, item) => {
        const isAvailable = !mentions.includes(item.title)

        if (isAvailable) {
          if (!acc[item.type]) {
            acc[item.type] = []
          }
          acc[item.type].push(item)
        }
        return acc
      },
      {} as Record<string, typeof SAMPLE_DATA.mentionable>
    )
  }, [mentions, SAMPLE_DATA])

  const hasMentions = mentions.length > 0

  return (
    <div dir={t.dir}>
      <form>
        <Field>
          <FieldLabel htmlFor="rtl-notion-prompt" className="sr-only">
            {t.prompt}
          </FieldLabel>
          <InputGroup>