\n      <InputGroupAddon align=\"block-end\">\n        <Menu>\n          <MenuTrigger\n            render={\n              <Button size=\"sm-icon\" variant=\"outline\" pill>\n                <PlusIcon />\n              </Button>\n            }\n          />\n          <MenuPopup align=\"start\" className=\"w-52\">\n            <MenuItem>\n              <PaperclipIcon /> Add from local files\n            </MenuItem>\n            <MenuItem>\n              <DriveIcon />\n              Open Google Drive\n            </MenuItem>\n            <MenuSeparator />\n            <MenuItem render={<label />} closeOnClick={false}>\n              <BrainIcon />\n              Thinking\n              <Switch />\n            </MenuItem>\n            <MenuItem render={<label />} closeOnClick={false}>\n              <BrainIcon />\n              Web Search\n              <Switch />\n            </MenuItem>\n          </MenuPopup>\n        </Menu>\n        <Select defaultValue={models[1]} items={models}>\n          <SelectTrigger className=\"ml-auto w-auto mr-2\" variant=\"plain\">\n            <SelectValue placeholder=\"Model\" />\n          </SelectTrigger>\n          <SelectPopup>\n            <SelectList>\n              {models.map((model) => (\n                <SelectItem key={model.value} value={model}>\n                  {model.icon}\n                  {model.label}\n                </SelectItem>\n              ))}\n            </SelectList>\n          </SelectPopup>\n        </Select>\n        <Button size=\"sm-icon\" pill>\n          <ArrowUpIcon />\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n\nconst models = [\n  {\n    value: 'gpt',\n    label: 'GPT 5 Chat',\n    icon: (\n      <svg viewBox=\"0 0 256 260\" xmlns=\"http://www.w3.org/2000/svg\" className=\"dark:invert\">\n        <g>\n          <path d=\"M239.183914,106.202783 C245.054304,88.5242096 243.02228,69.1733805 233.607599,53.0998864 C219.451678,28.4588021 190.999703,15.7836129 163.213007,21.739505 C147.554077,4.32145883 123.794909,-3.42398554 100.87901,1.41873898 C77.9631105,6.26146349 59.3690093,22.9572536 52.0959621,45.2214219 C33.8436494,48.9644867 18.0901721,60.392749 8.86672513,76.5818033 C-5.443491,101.182962 -2.19544431,132.215255 16.8986662,153.320094 C11.0060865,170.990656 13.0197283,190.343991 22.4238231,206.422991 C36.5975553,231.072344 65.0680342,243.746566 92.8695738,237.783372 C105.235639,251.708249 123.001113,259.630942 141.623968,259.52692 C170.105359,259.552169 195.337611,241.165718 204.037777,214.045661 C222.28734,210.296356 238.038489,198.869783 247.267014,182.68528 C261.404453,158.127515 258.142494,127.262775 239.183914,106.202783 L239.183914,106.202783 Z M141.623968,242.541207 C130.255682,242.559177 119.243876,238.574642 110.519381,231.286197 L112.054146,230.416496 L163.724595,200.590881 C166.340648,199.056444 167.954321,196.256818 167.970781,193.224005 L167.970781,120.373788 L189.815614,133.010026 C190.034132,133.121423 190.186235,133.330564 190.224885,133.572774 L190.224885,193.940229 C190.168603,220.758427 168.442166,242.484864 141.623968,242.541207 Z M37.1575749,197.93062 C31.456498,188.086359 29.4094818,176.546984 31.3766237,165.342426 L32.9113895,166.263285 L84.6329973,196.088901 C87.2389349,197.618207 90.4682717,197.618207 93.0742093,196.088901 L156.255402,159.663793 L156.255402,184.885111 C156.243557,185.149771 156.111725,185.394602 155.89729,185.550176 L103.561776,215.733903 C80.3054953,229.131632 50.5924954,221.165435 37.1575749,197.93062 Z M23.5493181,85.3811273 C29.2899861,75.4733097 38.3511911,67.9162648 49.1287482,64.0478825 L49.1287482,125.438515 C49.0891492,128.459425 50.6965386,131.262556 53.3237748,132.754232 L116.198014,169.025864 L94.3531808,181.662102 C94.1132325,181.789434 93.8257461,181.789434 93.5857979,181.662102 L41.3526015,151.529534 C18.1419426,138.076098 10.1817681,108.385562 23.5493181,85.125333 L23.5493181,85.3811273 Z M203.0146,127.075598 L139.935725,90.4458545 L161.7294,77.8607748 C161.969348,77.7334434 162.256834,77.7334434 162.496783,77.8607748 L214.729979,108.044502 C231.032329,117.451747 240.437294,135.426109 238.871504,154.182739 C237.305714,172.939368 225.050719,189.105572 207.414262,195.67963 L207.414262,134.288998 C207.322521,131.276867 205.650697,128.535853 203.0146,127.075598 Z M224.757116,94.3850867 L223.22235,93.4642272 L171.60306,63.3828173 C168.981293,61.8443751 165.732456,61.8443751 163.110689,63.3828173 L99.9806554,99.8079259 L99.9806554,74.5866077 C99.9533004,74.3254088 100.071095,74.0701869 100.287609,73.9215426 L152.520805,43.7889738 C168.863098,34.3743518 189.174256,35.2529043 204.642579,46.0434841 C220.110903,56.8340638 227.949269,75.5923959 224.757116,94.1804513 L224.757116,94.3850867 Z M88.0606409,139.097931 L66.2158076,126.512851 C65.9950399,126.379091 65.8450965,126.154176 65.8065367,125.898945 L65.8065367,65.684966 C65.8314495,46.8285367 76.7500605,29.6846032 93.8270852,21.6883055 C110.90411,13.6920079 131.063833,16.2835462 145.5632,28.338998 L144.028434,29.2086986 L92.3579852,59.0343142 C89.7419327,60.5687513 88.1282597,63.3683767 88.1117998,66.4011901 L88.0606409,139.097931 Z M99.9294965,113.5185 L128.06687,97.3011417 L156.255402,113.5185 L156.255402,145.953218 L128.169187,162.170577 L99.9806554,145.953218 L99.9294965,113.5185 Z\" fill=\"#000000\"></path>\n        </g>\n      </svg>\n    )\n  },\n  {\n    value: 'claude',\n    label: 'Claude',\n    icon: (\n      <svg viewBox=\"0 0 256 257\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g>\n          <path d=\"M50.2278481,170.321013 L100.585316,142.063797 L101.427848,139.601013 L100.585316,138.24 L98.1225316,138.24 L89.6972152,137.721519 L60.921519,136.943797 L35.9696203,135.906835 L11.795443,134.610633 L5.70329114,133.31443 L0,125.796456 L0.583291139,122.037468 L5.70329114,118.602532 L13.0268354,119.250633 L29.2293671,120.352405 L53.5331646,122.037468 L71.161519,123.07443 L97.28,125.796456 L101.427848,125.796456 L102.011139,124.111392 L100.585316,123.07443 L99.4835443,122.037468 L74.3372152,104.992405 L47.116962,86.9751899 L32.8587342,76.6055696 L25.1463291,71.3559494 L21.2577215,66.4303797 L19.5726582,55.6718987 L26.5721519,47.9594937 L35.9696203,48.6075949 L38.3675949,49.2556962 L47.8946835,56.5792405 L68.2450633,72.3281013 L94.8172152,91.9007595 L98.7058228,95.1412658 L100.261266,94.0394937 L100.455696,93.2617722 L98.7058228,90.3453165 L84.2531646,64.2268354 L68.8283544,37.6546835 L61.958481,26.636962 L60.1437975,20.0263291 C59.4956962,17.3043038 59.0420253,15.0359494 59.0420253,12.2491139 L67.0136709,1.42582278 L71.4207595,-1.42108547e-14 L82.0496203,1.42582278 L86.521519,5.31443038 L93.1321519,20.4151899 L103.825823,44.2005063 L120.417215,76.5407595 L125.277975,86.1326582 L127.87038,95.0116456 L128.842532,97.7336709 L130.527595,97.7336709 L130.527595,96.1782278 L131.888608,77.9665823 L134.416203,55.6070886 L136.878987,26.8313924 L137.721519,18.7301266 L141.739747,9.00860759 L149.711392,3.75898734 L155.933165,6.74025316 L161.053165,14.0637975 L160.340253,18.7949367 L157.294177,38.5620253 L151.331646,69.5412658 L147.443038,90.2805063 L149.711392,90.2805063 L152.303797,87.6881013 L162.803038,73.7539241 L180.431392,51.718481 L188.208608,42.9691139 L197.282025,33.3124051 L203.114937,28.7108861 L214.132658,28.7108861 L222.233924,40.7655696 L218.604557,53.2091139 L207.262785,67.596962 L197.865316,79.7812658 L184.38481,97.9281013 L175.959494,112.44557 L176.737215,113.612152 L178.746329,113.417722 L209.207089,106.936709 L225.668861,103.955443 L245.306329,100.585316 L254.185316,104.733165 L255.157468,108.945823 L251.657722,117.56557 L230.659241,122.75038 L206.031392,127.675949 L169.348861,136.360506 L168.89519,136.684557 L169.413671,137.332658 L185.940253,138.888101 L193.004557,139.276962 L210.308861,139.276962 L242.519494,141.674937 L250.94481,147.248608 L256,154.053671 L255.157468,159.238481 L242.195443,165.849114 L224.696709,161.701266 L183.866329,151.979747 L169.867342,148.48 L167.923038,148.48 L167.923038,149.646582 L179.588861,161.053165 L200.976203,180.366582 L227.742785,205.253671 L229.103797,211.410633 L225.668861,216.271392 L222.039494,215.752911 L198.513418,198.059747 L189.44,190.088101 L168.89519,172.783797 L167.534177,172.783797 L167.534177,174.598481 L172.265316,181.533165 L197.282025,219.123038 L198.578228,230.659241 L196.763544,234.418228 L190.282532,236.686582 L183.153418,235.39038 L168.506329,214.84557 L153.40557,191.708354 L141.221266,170.969114 L139.730633,171.811646 L132.536709,249.259747 L129.166582,253.213165 L121.389367,256.19443 L114.908354,251.268861 L111.473418,243.297215 L114.908354,227.548354 L119.056203,207.003544 L122.426329,190.671392 L125.472405,170.385823 L127.287089,163.64557 L127.157468,163.191899 L125.666835,163.386329 L110.371646,184.38481 L87.1048101,215.817722 L68.6987342,235.52 L64.2916456,237.269873 L56.6440506,233.316456 L57.356962,226.252152 L61.6344304,219.96557 L87.1048101,187.560506 L102.46481,167.469367 L112.380759,155.868354 L112.315949,154.183291 L111.732658,154.183291 L44.0708861,198.124557 L32.0162025,199.68 L26.8313924,194.819241 L27.4794937,186.847595 L29.9422785,184.25519 L50.2926582,170.256203 L50.2278481,170.321013 Z\" fill=\"#D97757\"></path>\n        </g>\n      </svg>\n    )\n  },\n];\n\nfunction DriveIcon() {\n  return (\n    <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n        fill=\"#0066da\"\n      />\n      <path\n        d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n        fill=\"#00ac47\"\n      />\n      <path\n        d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n        fill=\"#ea4335\"\n      />\n      <path\n        d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n        fill=\"#00832d\"\n      />\n      <path\n        d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n        fill=\"#2684fc\"\n      />\n      <path\n        d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n        fill=\"#ffba00\"\n      />\n    </svg>\n  );\n}","greeting.tsx","import { Button } from \"components/selia/button\";\nimport { IconBox } from \"components/selia/icon-box\";\nimport { Item, ItemAction, ItemContent, ItemDescription, ItemMedia, ItemTitle } from \"components/selia/item\";\nimport { ArrowRightIcon, CalculatorIcon, GlobeIcon, MessageCircleCodeIcon, MessageCircleMoreIcon } from \"lucide-react\";\n\nexport function Greeting() {\n  return (\n    <div className=\"w-10/12 mx-auto 2xl:mt-40 mt-20\">\n      <div className=\"font-light text-3xl text-muted\">Hello, there!</div>\n      <h1 className=\"text-4xl font-light\">What can I do for you today?</h1>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 *:cursor-pointer\">\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox>\n              <MessageCircleMoreIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              General Questions\n            </ItemTitle>\n            <ItemDescription>\n              Ask me anything about the general topics.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox variant=\"danger\">\n              <CalculatorIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              Solve Math Problems\n            </ItemTitle>\n            <ItemDescription>\n              Solve math problems with detailed steps.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox variant=\"success\">\n              <MessageCircleCodeIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              Generate Code\n            </ItemTitle>\n            <ItemDescription>\n              Generate code for your application.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox variant=\"info\">\n              <GlobeIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              Deep Research\n            </ItemTitle>\n            <ItemDescription>\n              Deep research on any topic you want.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n      </div>\n      <div className=\"text-center mt-6\">\n        <Button variant=\"secondary\" pill size=\"xs\" className=\"text-sm\">\n          Explore More\n          <ArrowRightIcon />\n        </Button>\n      </div>\n    </div>\n  );\n}","layout.tsx","import { cn } from \"#utils\";\nimport { Button } from \"components/selia/button\";\nimport { Heading } from \"components/selia/heading\";\nimport { HatGlassesIcon, SidebarCloseIcon, SidebarOpenIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { SidebarChat } from \"./sidebar\";\n\nexport function Layout({ children }: { children: React.ReactNode }) {\n  // in real case you should use the layout store to manage the sidebar open state\n  const [sidebarOpen, setSidebarOpen] = useState(true);\n\n  useEffect(() => {\n    const windowResize = () => {\n      if (window.innerWidth < 1024) {\n        setSidebarOpen(false);\n      } else {\n        setSidebarOpen(true);\n      }\n    };\n\n    windowResize();\n    window.addEventListener('resize', windowResize);\n    return () => window.removeEventListener('resize', windowResize);\n  }, []);\n\n  function handleSidebarOpen() {\n    setSidebarOpen(!sidebarOpen);\n  }\n\n  return (\n    <div className=\"flex h-dvh\">\n      <div className={cn(\"lg:w-72 lg:sticky top-0 lg:h-dvh transition-all duration-200\", \"fixed size-full z-50 max-lg:bg-background\", sidebarOpen ? 'ml-0 left-0' : '-left-full lg:-ml-72')}>\n        <SidebarChat sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />\n      </div>\n      <main className=\"flex-1 flex flex-col\">\n        <nav className=\"p-4 border-b border-card-separator flex items-center gap-2.5\">\n          <Button variant=\"plain\" size=\"sm-icon\" className=\"text-muted\" onClick={handleSidebarOpen}>\n            {sidebarOpen ? <SidebarCloseIcon /> : <SidebarOpenIcon />}\n          </Button>\n          <Heading size=\"sm\" level={2}>New Chat</Heading>\n          <Button variant=\"secondary\" size=\"sm-icon\" className=\"ml-auto\">\n            <HatGlassesIcon />\n          </Button>\n        </nav>\n        {children}\n      </main>\n    </div>\n  );\n}","import { ScrollArea } from \"components/selia/scroll-area\";\nimport { Editor } from \"./editor\";\nimport { Layout } from \"./layout\";\nimport { Greeting } from \"./greeting\";\n\nexport default function AiChat() {\n  return (\n    <Layout>\n      <ScrollArea className=\"flex-1\">\n        <div className=\"w-full max-w-3xl mx-auto\">\n          <Greeting />\n        </div>\n      </ScrollArea>\n      <div className=\"shrink-0 w-full max-w-3xl mx-auto py-4 px-4 lg:px-0\">\n        <Editor />\n      </div>\n    </Layout >\n  );\n}\n","sidebar.tsx","import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupTitle, SidebarHeader, SidebarItem, SidebarItemButton, SidebarItemAction, SidebarList, SidebarLogo, SidebarMenu } from 'components/selia/sidebar';\nimport { SearchIcon, PlusIcon, StoreIcon, HardDriveIcon, CodeSquareIcon, FolderIcon, EllipsisIcon, PencilIcon, ArchiveIcon, TrashIcon, ShareIcon, PinIcon, ChevronsUpDownIcon, LogOutIcon, SparklesIcon, PaletteIcon, SettingsIcon, SidebarCloseIcon, SidebarOpenIcon } from 'lucide-react';\nimport { Button } from 'components/selia/button';\nimport { Menu, MenuTrigger, MenuPopup, MenuItem, MenuSeparator } from 'components/selia/menu';\nimport { Avatar, AvatarFallback, AvatarImage } from 'components/selia/avatar';\nimport { ScrollArea } from 'components/selia/scroll-area';\n\nexport function SidebarChat({ sidebarOpen, setSidebarOpen }: { sidebarOpen: boolean, setSidebarOpen: (open: boolean) => void }) {\n  return (\n    <Sidebar\n      className='size-full bg-[oklch(0.977_0.0007_247.83)] dark:bg-[oklch(0.1574_0.0017_247.94)] border-r border-separator/60'\n      size=\"compact\"\n    >\n      <SidebarHeader>\n        <div className=\"flex items-center justify-between\">\n          <SidebarLogo>\n            <img src=\"/selia.png\" alt=\"Selia\" className=\"size-8\" />\n            <span className=\"font-semibold text-lg\">Chat</span>\n          </SidebarLogo>\n          <div className=\"flex items-center gap-2.5\">\n            <Button variant=\"plain\" size=\"sm-icon\">\n              <SearchIcon />\n            </Button>\n            <Button className=\"lg:hidden\" variant=\"plain\" size=\"sm-icon\" onClick={() => setSidebarOpen(!sidebarOpen)}>\n              {sidebarOpen ? <SidebarCloseIcon /> : <SidebarOpenIcon />}\n            </Button>\n          </div>\n        </div>\n        <SidebarMenu className=\"mt-4.5\">\n          <Button variant=\"primary\" block>\n            <PlusIcon />\n            New Chat\n          </Button>\n          <SidebarGroup>\n            <SidebarList>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <StoreIcon />\n                  Marketplace\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <HardDriveIcon />\n                  Storage\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <CodeSquareIcon />\n                  Artifacts\n                </SidebarItemButton>\n              </SidebarItem>\n            </SidebarList>\n          </SidebarGroup>\n          <SidebarGroup>\n            <SidebarGroupTitle>Projects</SidebarGroupTitle>\n            <SidebarList>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <FolderIcon />\n                  Programming\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <FolderIcon />\n                  Design\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <PlusIcon />\n                  New Project\n                </SidebarItemButton>\n              </SidebarItem>\n            </SidebarList>\n          </SidebarGroup>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent render={<ScrollArea />}>\n        <SidebarMenu>\n          <SidebarGroup>\n            <SidebarGroupTitle>Recent</SidebarGroupTitle>\n            <SidebarList>\n              {recentChats.map((chat, index) => (\n                <SidebarItem key={index}>\n                  <SidebarItemButton active={index === 0}>\n                    {chat.pinned && <PinIcon />}\n                    <span className=\"truncate flex-1 text-left\">\n                      {chat.title}\n                    </span>\n                  </SidebarItemButton>\n                  <SidebarItemAction showOnHover>\n                    <Menu>\n                      <MenuTrigger className=\"text-foreground size-full flex justify-center items-center\">\n                        <EllipsisIcon />\n                      </MenuTrigger>\n                      <MenuPopup className=\"w-42\" size=\"compact\">\n                        <MenuItem>\n                          <PinIcon />\n                          Pin\n                        </MenuItem>\n                        <MenuItem>\n                          <ShareIcon />\n                          Share\n                        </MenuItem>\n                        <MenuItem>\n                          <PencilIcon />\n                          Rename\n                        </MenuItem>\n                        <MenuItem>\n                          <ArchiveIcon />\n                          Archive\n                        </MenuItem>\n                        <MenuSeparator />\n                        <MenuItem className=\"text-danger\">\n                          <TrashIcon className=\"text-danger\" />\n                          Delete\n                        </MenuItem>\n                      </MenuPopup>\n                    </Menu>\n                  </SidebarItemAction>\n                </SidebarItem>\n              ))}\n            </SidebarList>\n          </SidebarGroup>\n        </SidebarMenu>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarList>\n            <SidebarItem>\n              <Menu>\n                <MenuTrigger\n                  data-slot=\"sidebar-item-button\"\n                  nativeButton={false}\n                  render={\n                    <SidebarItemButton>\n                      <Avatar size=\"sm\">\n                        <AvatarImage\n                          src=\"https://pbs.twimg.com/profile_images/1881314507865411584/aXlN8o5e_400x400.jpg\"\n                          alt=\"Avatar\"\n                        />\n                        <AvatarFallback>RF</AvatarFallback>\n                      </Avatar>\n                      <div className=\"flex flex-col\">\n                        <span className=\"font-medium\">Rizal Fakhri</span>\n                        <span className=\"text-sm text-muted\">Free plan</span>\n                      </div>\n                      <ChevronsUpDownIcon className=\"ml-auto\" />\n                    </SidebarItemButton>\n                  }\n                />\n                <MenuPopup className=\"w-(--anchor-width)\" side=\"top\">\n                  <MenuItem>\n                    <SparklesIcon />\n                    Upgrade Plan\n                  </MenuItem>\n                  <MenuItem>\n                    <PaletteIcon />\n                    Personalization\n                  </MenuItem>\n                  <MenuItem>\n                    <SettingsIcon />\n                    Settings\n                  </MenuItem>\n                  <MenuSeparator />\n                  <MenuItem>\n                    <LogOutIcon />\n                    Logout\n                  </MenuItem>\n                </MenuPopup>\n              </Menu>\n            </SidebarItem>\n          </SidebarList>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  );\n}\n\nconst recentChats = [\n  { title: 'Atomic CSS vs Utility-first CSS', pinned: true },\n  { title: 'React Server Components basic example', pinned: true },\n  { title: 'Next.js dynamic routing gotchas', pinned: false },\n  { title: 'Better folder structure for reusable UI', pinned: false },\n  { title: 'State management with Zustand pattern', pinned: false },\n  { title: 'Collapsible sidebar accessibility best practices', pinned: false },\n  { title: 'Optimizing React rendering performance', pinned: false },\n  { title: 'Dark mode implementation overview', pinned: false },\n  { title: 'Vite vs Webpack build speeds', pinned: false },\n  { title: 'Shared form validation rules in React', pinned: false },\n  { title: 'Comparing tRPC and REST for API design', pinned: false },\n  { title: 'Tips for CSS-in-JS migration', pinned: false },\n  { title: 'React context and prop drilling explained', pinned: false },\n  { title: 'Keyboard shortcuts in web apps', pinned: false },\n  { title: 'TypeScript generics for UI components', pinned: false },\n  { title: 'Testing React components with RTL', pinned: false },\n  { title: 'Deploying fullstack apps on Vercel', pinned: false },\n  { title: 'Animating list reordering in Framer Motion', pinned: false },\n  { title: 'Responsive design with Tailwind CSS', pinned: false },\n  { title: 'Handling errors in async React flows', pinned: false },\n  { title: 'Managing complex state with reducers', pinned: false },\n  { title: 'Component-driven design workflows', pinned: false },\n  { title: 'Integration testing in monorepos', pinned: false },\n  { title: 'Mocking API responses for frontend dev', pinned: false },\n];\n\n","actionData","errors"]
</article></body></html>

Build Faster with Pre-Built Blocks