ChatSettings() — ui Function Reference

Architecture documentation for the ChatSettings() function in chat-settings.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ChatSettings() — ui Function Reference

Dependency Diagram

graph TD
  6288d9c2_eaca_240a_b607_0000b95833a7["ChatSettings()"]
  b7cd9c33_4461_4f6a_58c0_7ce867d62437["chat-settings.tsx"]
  6288d9c2_eaca_240a_b607_0000b95833a7 -->|defined in| b7cd9c33_4461_4f6a_58c0_7ce867d62437
  style 6288d9c2_eaca_240a_b607_0000b95833a7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/forms/chat-settings.tsx lines 126–463

export function ChatSettings() {
  const [tab, setTab] = useState("general")
  const [theme, setTheme] = useState("system")
  const [accentColor, setAccentColor] = useState("default")
  const [spokenLanguage, setSpokenLanguage] = useState("en")
  const [voice, setVoice] = useState("samantha")
  const [personality, setPersonality] = useState("friendly")
  const [customInstructions, setCustomInstructions] = useState("")

  return (
    <div className="flex flex-col gap-4">
      <Button variant="outline" asChild className="w-full md:hidden">
        <select
          value={tab}
          onChange={(e) => setTab(e.target.value)}
          className="appearance-none"
        >
          <option value="general">General</option>
          <option value="notifications">Notifications</option>
          <option value="personalization">Personalization</option>
          <option value="security">Security</option>
        </select>
      </Button>
      <Tabs value={tab} onValueChange={setTab}>
        <TabsList className="hidden md:flex">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="personalization">Personalization</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
        </TabsList>
        <div className="rounded-lg border p-6 [&_[data-slot=select-trigger]]:min-w-[125px]">
          <TabsContent value="general">
            <FieldSet>
              <FieldGroup>
                <Field orientation="horizontal">
                  <FieldLabel htmlFor="theme">Theme</FieldLabel>
                  <Select value={theme} onValueChange={setTheme}>
                    <SelectTrigger id="theme">
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent align="end">
                      <SelectItem value="light">Light</SelectItem>
                      <SelectItem value="dark">Dark</SelectItem>
                      <SelectItem value="system">System</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
                <FieldSeparator />
                <Field orientation="horizontal">
                  <FieldLabel htmlFor="accent-color">Accent Color</FieldLabel>
                  <Select value={accentColor} onValueChange={setAccentColor}>
                    <SelectTrigger id="accent-color">
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent align="end">
                      <SelectItem value="default">
                        <CircleIcon className="fill-neutral-500 stroke-neutral-500 dark:fill-neutral-400 dark:stroke-neutral-400" />
                        Default
                      </SelectItem>
                      <SelectItem value="red">
                        <CircleIcon className="fill-red-500 stroke-red-500 dark:fill-red-400 dark:stroke-red-400" />
                        Red
                      </SelectItem>
                      <SelectItem value="blue">
                        <CircleIcon className="fill-blue-500 stroke-blue-500 dark:fill-blue-400 dark:stroke-blue-400" />
                        Blue
                      </SelectItem>
                      <SelectItem value="green">
                        <CircleIcon className="fill-green-500 stroke-green-500 dark:fill-green-400 dark:stroke-green-400" />
                        Green
                      </SelectItem>
                      <SelectItem value="purple">
                        <CircleIcon className="fill-purple-500 stroke-purple-500 dark:fill-purple-400 dark:stroke-purple-400" />
                        Purple
                      </SelectItem>
                      <SelectItem value="pink">
                        <CircleIcon className="fill-pink-500 stroke-pink-500 dark:fill-pink-400 dark:stroke-pink-400" />
                        Pink
                      </SelectItem>
                    </SelectContent>
                  </Select>