CreateProjectForm() — ui Function Reference

Architecture documentation for the CreateProjectForm() function in chatgpt.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CreateProjectForm() — ui Function Reference

Dependency Diagram

graph TD
  92b2a556_20b2_51f6_a9d7_4c139902fa06["CreateProjectForm()"]
  1a8eb712_9ad3_8ee1_f665_9fe11916369f["chatgpt.tsx"]
  92b2a556_20b2_51f6_a9d7_4c139902fa06 -->|defined in| 1a8eb712_9ad3_8ee1_f665_9fe11916369f
  style 92b2a556_20b2_51f6_a9d7_4c139902fa06 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/chatgpt.tsx lines 436–635

function CreateProjectForm() {
  const [projectName, setProjectName] = React.useState("")
  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(
    categories[0].id
  )
  const [memorySetting, setMemorySetting] = React.useState<
    "default" | "project-only"
  >("default")
  const [selectedColor, setSelectedColor] = React.useState<string | null>(
    "var(--foreground)"
  )

  return (
    <Example title="Create Project" className="items-center justify-center">
      <Card className="w-full max-w-sm">
        <CardHeader>
          <CardTitle>Create Project</CardTitle>
          <CardDescription>
            Start a new project to keep chats, files, and custom instructions in
            one place.
          </CardDescription>
          <CardAction>
            <DropdownMenu>
              <DropdownMenuTrigger
                render={<Button variant="ghost" size="icon" />}
              >
                <IconPlaceholder
                  lucide="SettingsIcon"
                  tabler="IconSettings"
                  hugeicons="Settings01Icon"
                  phosphor="GearIcon"
                  remixicon="RiSettingsLine"
                />
                <span className="sr-only">Memory</span>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-72">
                <DropdownMenuGroup>
                  <DropdownMenuRadioGroup
                    value={memorySetting}
                    onValueChange={(value) => {
                      setMemorySetting(value as "default" | "project-only")
                    }}
                  >
                    <DropdownMenuRadioItem value="default">
                      <Item size="xs">
                        <ItemContent>
                          <ItemTitle>Default</ItemTitle>
                          <ItemDescription className="text-xs">
                            Project can access memories from outside chats, and
                            vice versa.
                          </ItemDescription>
                        </ItemContent>
                      </Item>
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="project-only">
                      <Item size="xs">
                        <ItemContent>
                          <ItemTitle>Project Only</ItemTitle>
                          <ItemDescription className="text-xs">
                            Project can only access its own memories. Its
                            memories are hidden from outside chats.
                          </ItemDescription>
                        </ItemContent>
                      </Item>
                    </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuLabel>
                    Note that this setting can&apos;t be changed later.
                  </DropdownMenuLabel>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </CardAction>
        </CardHeader>
        <CardContent>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="project-name" className="sr-only">