styles: updated more-menu (#1578)

2026-07-03 14:10:03 +02:00 · 2025-03-21 22:00:26 -04:00
parent 119a7077c2
commit b5708babfe
12 changed files with 312 additions and 194 deletions
@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
@@ -16,6 +16,7 @@
        "@radix-ui/react-avatar": "^1.1.1",
        "@radix-ui/react-dialog": "^1.1.4",
        "@radix-ui/react-icons": "^1.3.1",
+        "@radix-ui/react-popover": "^1.1.6",
        "@radix-ui/react-radio-group": "^1.2.3",
        "@radix-ui/react-scroll-area": "^1.2.0",
        "@radix-ui/react-select": "^2.1.5",
@@ -73,6 +73,7 @@
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/react-popover": "^1.1.6",
    "@radix-ui/react-radio-group": "^1.2.3",
    "@radix-ui/react-scroll-area": "^1.2.0",
    "@radix-ui/react-select": "^2.1.5",
@@ -265,7 +265,7 @@ export default function ChatView({

  return (
    <div className="flex flex-col w-full h-screen items-center justify-center">
-      <div className="relative flex items-center h-[36px] w-full bg-bgSubtle border-b border-borderSubtle">
+      <div className="relative flex items-center h-[36px] w-full">
        <MoreMenu setView={setView} setIsGoosehintsModalOpen={setIsGoosehintsModalOpen} />
      </div>
      <Card className="flex flex-col flex-1 rounded-none h-[calc(100vh-95px)] w-full bg-bgApp mt-0 border-none relative">
@@ -1,6 +1,7 @@
-import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
+import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from '../components/ui/popover';
 import React, { useEffect, useState } from 'react';
-import { More } from './icons';
+import { ChatSmart, Idea, More, Refresh, Time } from './icons';
+import { FolderOpen, Moon, Sliders, Sun } from 'lucide-react';
 import { View } from '../App';

 interface VersionInfo {
@@ -8,7 +9,69 @@ interface VersionInfo {
  available_versions: string[];
 }

-// Accept setView as a prop from the parent (e.g. Chat)
+interface MenuButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+  subtitle?: string;
+  className?: string;
+  danger?: boolean;
+  icon?: React.ReactNode;
+}
+
+const MenuButton: React.FC<MenuButtonProps> = ({
+  onClick,
+  children,
+  subtitle,
+  className = '',
+  danger = false,
+  icon,
+}) => (
+  <button
+    onClick={onClick}
+    className={`w-full text-left px-4 py-3 min-h-[64px] text-sm hover:bg-bgSubtle transition-[background] border-b border-borderSubtle ${
+      danger ? 'text-red-400' : ''
+    } ${className}`}
+  >
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col">
+        <span>{children}</span>
+        {subtitle && (
+          <span className="text-xs font-regular text-textSubtle mt-0.5">{subtitle}</span>
+        )}
+      </div>
+      {icon && <div className="ml-2">{icon}</div>}
+    </div>
+  </button>
+);
+
+interface DarkModeToggleProps {
+  isDarkMode: boolean;
+  onToggle: () => void;
+}
+
+const DarkModeToggle: React.FC<DarkModeToggleProps> = ({ isDarkMode, onToggle }) => (
+  <button
+    className="flex items-center min-h-[64px] justify-between px-4 py-3 hover:bg-bgSubtle border-b border-borderSubtle"
+    onClick={onToggle}
+  >
+    <div className="flex flex-col items-start">
+      <span className="text-sm">{isDarkMode ? 'Light Mode' : 'Dark Mode'}</span>
+      <span className="text-xs font-regular text-textSubtle mt-0.5">
+        {isDarkMode ? 'Switch to light theme' : 'Switch to dark theme'}
+      </span>
+    </div>
+    <div className="h-4 w-4 overflow-hidden relative rounded-full">
+      <div className="absolute bg-bg flex h-4 w-4 flex-row items-center justify-center transition-transform rotate-180 dark:rotate-0 translate-x-[100%] dark:translate-x-[0%]">
+        <Sun className="h-4 w-4 transition-all duration-[400ms]" />
+      </div>
+
+      <div className="absolute bg-bg flex h-4 w-4 flex-row items-center justify-center transition-transform dark:translate-x-[-100%] dark:-rotate-90">
+        <Moon className="h-4 w-4 transition-all duration-[400ms]" />
+      </div>
+    </div>
+  </button>
+);
+
 export default function MoreMenu({
  setView,
  setIsGoosehintsModalOpen,
@@ -19,11 +82,9 @@ export default function MoreMenu({
  const [open, setOpen] = useState(false);
  const [versions, setVersions] = useState<VersionInfo | null>(null);
  const [showVersions, setShowVersions] = useState(false);
-
  const [useSystemTheme, setUseSystemTheme] = useState(
    () => localStorage.getItem('use_system_theme') === 'true'
  );
-
  const [isDarkMode, setDarkMode] = useState(() => {
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (useSystemTheme) {
@@ -96,209 +157,119 @@ export default function MoreMenu({
    }
  };

-  const toggleUseSystemTheme = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const checked = event.target.checked;
-    setUseSystemTheme(checked);
-    localStorage.setItem('use_system_theme', checked.toString());
-
-    if (checked) {
-      // If enabling system theme, immediately sync with system preference
-      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      setDarkMode(systemPrefersDark);
-      localStorage.removeItem('theme'); // Remove manual theme setting
-    }
-    // If disabling system theme, keep current theme state but don't update localStorage yet
-  };
-
  const handleVersionSelect = (version: string) => {
    setOpen(false);
    setShowVersions(false);
-    // Create a new chat window with the selected version
    window.electron.createChatWindow(undefined, undefined, version);
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
-        <button className="z-[100] absolute top-2 right-4 w-[20px] h-[20px] cursor-pointer no-drag text-textStandard">
+        <button
+          className={`z-[100] absolute top-2 right-4 w-[20px] h-[20px] transition-colors cursor-pointer no-drag hover:text-textProminent ${open ? 'text-textProminent' : 'text-textSubtle'}`}
+        >
          <More />
        </button>
      </PopoverTrigger>
+
      <PopoverPortal>
-        <PopoverContent
-          className="z-[200] w-48 rounded-md bg-bgApp border border-borderSubtle text-textStandard"
-          align="end"
-          sideOffset={5}
-        >
-          <div className="flex flex-col rounded-md">
-            {/* <div className="flex items-center justify-between p-2">
-              <span className="text-sm">Use System Theme</span>
-              <input type="checkbox" checked={useSystemTheme} onChange={toggleUseSystemTheme} />
-            </div> */}
-            {/* {!useSystemTheme && ( */}
-            <button
-              className="flex items-center justify-between p-2 hover:bg-bgSubtle transition-colors"
-              onClick={() => toggleTheme()}
-            >
-              <span className="text-sm">{isDarkMode ? 'Light Mode' : 'Dark Mode'}</span>
-              <div className="h-5 w-5 overflow-hidden relative rounded-full ">
-                <div className="absolute right-[-1px] bg-bg flex h-5 w-5 flex-row items-center justify-center transition-all rotate-180 dark:rotate-0 translate-x-[100%] dark:translate-x-[0%]">
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 text-[#fac64d] transition-all duration-[400ms]"
-                  >
-                    <path d="M6.995 12C6.995 14.761 9.241 17.007 12.002 17.007C14.763 17.007 17.009 14.761 17.009 12C17.009 9.239 14.763 6.993 12.002 6.993C9.241 6.993 6.995 9.239 6.995 12ZM11 19H13V22H11V19ZM11 2H13V5H11V2ZM2 11H5V13H2V11ZM19 11H22V13H19V11Z"></path>
-                    <path d="M5.63702 19.778L4.22302 18.364L6.34402 16.243L7.75802 17.657L5.63702 19.778Z"></path>
-                    <path d="M16.242 6.34405L18.364 4.22205L19.778 5.63605L17.656 7.75805L16.242 6.34405Z"></path>
-                    <path d="M6.34402 7.75902L4.22302 5.63702L5.63802 4.22302L7.75802 6.34502L6.34402 7.75902Z"></path>
-                    <path d="M19.778 18.3639L18.364 19.7779L16.242 17.6559L17.656 16.2419L19.778 18.3639Z"></path>
-                  </svg>
-                </div>
-
-                <div className="absolute right-[-1px] bg-bg flex h-5 w-5 flex-row items-center justify-center transition-all dark:translate-x-[-100%] dark:-rotate-90">
-                  <svg
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 text-[#8b8bf8] transition-all duration-[400ms]"
-                  >
-                    <path d="M12 11.807C10.7418 10.5483 9.88488 8.94484 9.53762 7.1993C9.19037 5.45375 9.36832 3.64444 10.049 2C8.10826 2.38205 6.3256 3.33431 4.92899 4.735C1.02399 8.64 1.02399 14.972 4.92899 18.877C8.83499 22.783 15.166 22.782 19.072 18.877C20.4723 17.4805 21.4245 15.6983 21.807 13.758C20.1625 14.4385 18.3533 14.6164 16.6077 14.2692C14.8622 13.9219 13.2588 13.0651 12 11.807V11.807Z"></path>
-                  </svg>
-                </div>
-              </div>
-
-              {/* {isDarkMode ? (
-                <FaMoon className="text-gray-200" />
-              ) : (
-                <FaSun className="text-yellow-500" />
-              )} */}
-              {/* <div
-                className={`relative inline-flex items-center h-6 rounded-full w-11 focus:outline-none border-2 ${
-                  isDarkMode ? 'bg-gray-600 border-gray-600' : 'bg-yellow-300 border-yellow-300'
-                }`}
-              >
-                <span
-                  className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform ${
-                    isDarkMode ? 'translate-x-6' : 'translate-x-1'
-                  }`}
-                >
-                  {isDarkMode ? (
-                    <FaMoon className="text-gray-200" />
-                  ) : (
-                    <FaSun className="text-yellow-500" />
-                  )}
-                </span>
-              </div> */}
-            </button>
-            {/* )} */}
-
-            {/* Versions Menu */}
-            {/* NOTE from alexhancock on 1/14/2025 - disabling temporarily until we figure out where this will go in settings */}
-            {false && versions && versions.available_versions.length > 0 && (
-              <>
-                <button
-                  onClick={() => setShowVersions(!showVersions)}
-                  className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700 flex justify-between items-center"
-                >
-                  <span>Versions</span>
-                  <span className="text-xs">{showVersions ? '▼' : '▶'}</span>
-                </button>
-                {showVersions && (
-                  <div className="pl-2 bg-gray-900">
-                    {versions.available_versions.map((version) => (
-                      <button
-                        key={version}
-                        onClick={() => handleVersionSelect(version)}
-                        className={`w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700 ${
-                          version === versions.current_version ? 'text-green-400' : ''
-                        }`}
-                      >
-                        {version} {version === versions.current_version && '(current)'}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </>
-            )}
-
-            <div
-              onClick={() => setIsGoosehintsModalOpen(true)}
-              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors cursor-pointer"
-            >
-              Configure .goosehints
-            </div>
-
-            <button
-              onClick={() => {
-                setOpen(false);
-                window.electron.directoryChooser();
-              }}
-              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
-            >
-              Open Directory <span className="text-textSubtle">⌘O</span>
-            </button>
-
-            <button
-              onClick={() => {
-                setOpen(false);
-                window.electron.createChatWindow(
-                  undefined,
-                  window.appConfig.get('GOOSE_WORKING_DIR')
-                );
-              }}
-              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
-            >
-              New Session <span className="text-textSubtle">⌘N</span>
-            </button>
-
-            {/* View Previous Sessions */}
-            <button
-              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
-              onClick={() => setView('sessions')}
-            >
-              <span>Previous Sessions</span>
-            </button>
-
-            {/* Settings Menu */}
-            <button
-              onClick={() => {
-                setOpen(false);
-                setView('settings');
-              }}
-              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
-            >
-              Settings <span className="text-textSubtle">⌘,</span>
-            </button>
-
-            <button
-              onClick={() => {
-                localStorage.removeItem('GOOSE_PROVIDER');
-                setOpen(false);
-                window.electron.createChatWindow();
-              }}
-              className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors text-red-400"
-            >
-              Reset Provider
-            </button>
-            {process.env.ALPHA && (
-              <button
+        <>
+          <div
+            className={`z-[150] fixed inset-0 bg-black transition-all animate-in duration-500 fade-in-0 opacity-50`}
+          />
+          <PopoverContent
+            className="z-[200] w-[375px] overflow-hidden rounded-lg bg-bgApp border border-borderSubtle text-textStandard !zoom-in-100 !slide-in-from-right-4 !slide-in-from-top-0"
+            align="end"
+            sideOffset={5}
+          >
+            <div className="flex flex-col rounded-md">
+              <MenuButton
                onClick={() => {
                  setOpen(false);
-                  setView('alphaConfigureProviders');
+                  window.electron.createChatWindow(
+                    undefined,
+                    window.appConfig.get('GOOSE_WORKING_DIR')
+                  );
                }}
-                className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors text-indigo-800"
+                subtitle="Start a new session in the current directory"
+                icon={<ChatSmart className="w-4 h-4" />}
              >
-                See new providers grid
-              </button>
-            )}
-          </div>
-        </PopoverContent>
+                New session
+                <span className="text-textSubtle ml-1">⌘N</span>
+              </MenuButton>
+
+              <MenuButton
+                onClick={() => {
+                  setOpen(false);
+                  window.electron.directoryChooser();
+                }}
+                subtitle="Start a new session in a different directory"
+                icon={<FolderOpen className="w-4 h-4" />}
+              >
+                Open directory
+                <span className="text-textSubtle ml-1">⌘O</span>
+              </MenuButton>
+
+              <MenuButton
+                onClick={() => setView('sessions')}
+                subtitle="View previous sessions and their contents"
+                icon={<Time className="w-4 h-4" />}
+              >
+                Session history
+              </MenuButton>
+
+              <MenuButton
+                onClick={() => setIsGoosehintsModalOpen(true)}
+                subtitle="Customize instructions"
+                icon={<Idea className="w-4 h-4" />}
+              >
+                Configure .goosehints
+              </MenuButton>
+
+              <DarkModeToggle isDarkMode={isDarkMode} onToggle={toggleTheme} />
+
+              <MenuButton
+                onClick={() => {
+                  setOpen(false);
+                  setView('settings');
+                }}
+                subtitle="View all settings and options"
+                icon={<Sliders className="w-4 h-4 rotate-90" />}
+              >
+                Advanced settings
+                <span className="text-textSubtle ml-1">⌘,</span>
+              </MenuButton>
+
+              <MenuButton
+                onClick={() => {
+                  localStorage.removeItem('GOOSE_PROVIDER');
+                  setOpen(false);
+                  window.electron.createChatWindow();
+                }}
+                danger
+                subtitle="Clear selected model and restart"
+                icon={<Refresh className="w-4 h-4 text-textStandard" />}
+                className="border-b-0"
+              >
+                Reset provider and model
+              </MenuButton>
+
+              {process.env.ALPHA && (
+                <MenuButton
+                  onClick={() => {
+                    setOpen(false);
+                    setView('alphaConfigureProviders');
+                  }}
+                  className="text-indigo-800"
+                  subtitle="Preview the new provider configuration interface"
+                >
+                  See new providers grid
+                </MenuButton>
+              )}
+            </div>
+          </PopoverContent>
+        </>
      </PopoverPortal>
    </Popover>
  );
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function ChatSmart({ className = '' }) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.2625 2.72219C18.3379 2.49299 18.6621 2.49299 18.7375 2.72219L19.5742 5.26646C19.5991 5.34188 19.6582 5.40103 19.7336 5.42584L22.2779 6.2626C22.5071 6.33798 22.5071 6.66219 22.2779 6.73757L19.7336 7.57433C19.6582 7.59914 19.5991 7.65829 19.5742 7.73372L18.7375 10.278C18.6621 10.5072 18.3379 10.5072 18.2625 10.278L17.4258 7.73372C17.4009 7.65829 17.3418 7.59914 17.2664 7.57433L14.7221 6.73757C14.4929 6.66219 14.4929 6.33798 14.7221 6.2626L17.2664 5.42584C17.3418 5.40103 17.4009 5.34188 17.4258 5.26646L18.2625 2.72219ZM1.5 6.00016C1.5 4.89559 2.39543 4.00016 3.5 4.00016H12C12.5523 4.00016 13 4.44788 13 5.00016C13 5.55245 12.5523 6.00016 12 6.00016L3.5 6.00016V16.5002L9.68478 16.5002C10.0951 16.5002 10.4955 16.6264 10.8317 16.8617L14 19.0795V17.5002C14 17.2349 14.1054 16.9806 14.2929 16.7931C14.4804 16.6055 14.7348 16.5002 15 16.5002L20.5 16.5002V11.0002C20.5 10.4479 20.9477 10.0002 21.5 10.0002C22.0523 10.0002 22.5 10.4479 22.5 11.0002V16.5002C22.5 17.6047 21.6046 18.5002 20.5 18.5002L16 18.5002V21.0002C16 21.373 15.7925 21.7149 15.4618 21.8871C15.1311 22.0593 14.732 22.0332 14.4265 21.8194L9.68478 18.5002L3.5 18.5002C2.39543 18.5002 1.5 17.6047 1.5 16.5002V6.00016ZM14.2375 8.72234C14.1621 8.49315 13.8379 8.49315 13.7625 8.72234L13.297 10.1378C13.2722 10.2133 13.213 10.2724 13.1376 10.2972L11.7221 10.7628C11.4929 10.8381 11.4929 11.1623 11.7221 11.2377L13.1376 11.7033C13.213 11.7281 13.2722 11.7872 13.297 11.8626L13.7625 13.2781C13.8379 13.5073 14.1621 13.5073 14.2375 13.2781L14.703 11.8626C14.7278 11.7872 14.787 11.7281 14.8624 11.7033L16.2779 11.2377C16.5071 11.1623 16.5071 10.8381 16.2779 10.7628L14.8624 10.2972C14.787 10.2724 14.7278 10.2133 14.703 10.1378L14.2375 8.72234Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function Idea({ className = '' }) {
+  return (
+    <svg
+      width="1.5rem"
+      height="1.5rem"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3C7.67283 3 4.98694 7.96755 7.41702 11.7635L8.84879 14L15.1514 14L16.5831 11.7633C19.013 7.96731 16.3271 3 12 3ZM5.73261 12.8418C2.49843 7.78981 6.00376 1 12 1C17.9961 1 21.5015 7.78948 18.2676 12.8415L16.7382 15.2309C16.4351 15.7043 15.9116 16 15.339 16L8.66122 16C8.0886 16 7.56511 15.7043 7.26208 15.2309L5.73261 12.8418ZM8.00002 18C8.00002 17.4477 8.44774 17 9.00002 17H12H15C15.5523 17 16 17.4477 16 18C16 18.5523 15.5523 19 15 19H12H9.00002C8.44774 19 8.00002 18.5523 8.00002 18ZM10 20C9.44774 20 9.00003 20.4477 9.00003 21C9.00003 21.5523 9.44774 22 10 22H12H14C14.5523 22 15 21.5523 15 21C15 20.4477 14.5523 20 14 20H12H10Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Refresh({ className = '' }) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.1508 1.74076C13.7315 1.38134 13.1002 1.4299 12.7407 1.84923C12.3813 2.26855 12.4299 2.89985 12.8492 3.25927L14.2968 4.50004H11.5001C6.8057 4.50004 3.00012 8.30564 3.00012 13.0001C3.00012 17.6945 6.80568 21.5 11.5001 21.5C16.1945 21.5 20.0001 17.6944 20.0001 13C20.0001 12.4477 19.5523 12 19.0001 12C18.4478 12 18.0001 12.4477 18.0001 13C18.0001 16.5899 15.0899 19.5 11.5001 19.5C7.91026 19.5 5.00012 16.5899 5.00012 13.0001C5.00012 9.4102 7.91027 6.50004 11.5001 6.50004H14.2967L12.8492 7.74076C12.4299 8.10018 12.3813 8.73148 12.7407 9.15081C13.1002 9.57014 13.7315 9.6187 14.1508 9.25927L17.6417 6.26706C17.8608 6.08362 18.0001 5.8081 18.0001 5.50004C18.0001 5.19294 17.8616 4.91817 17.6438 4.73474L14.1508 1.74076Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Settings({ className = '' }) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6326 3.5C10.3981 3.5 10.1862 3.69609 10.1862 3.96499C10.1862 4.98498 9.56936 5.81161 8.80634 6.2491C8.77137 6.26915 8.73659 6.28953 8.702 6.31022C7.94634 6.76246 6.91891 6.89623 6.03237 6.3778C5.82611 6.25719 5.55643 6.3235 5.4295 6.54618L4.06296 8.94353C3.93162 9.17396 4.0146 9.46279 4.22888 9.5881C5.11053 10.1037 5.50474 11.0605 5.49681 11.938L5.49653 12L5.49681 12.062C5.50475 12.9395 5.11053 13.8963 4.22888 14.4119C4.0146 14.5372 3.93162 14.8261 4.06296 15.0565L5.42949 17.4538C5.55643 17.6765 5.82612 17.7428 6.03237 17.6222L6.53717 18.4854L6.03237 17.6222C6.91892 17.1038 7.94635 17.2375 8.70202 17.6898L8.70203 17.6898C8.73658 17.7105 8.77135 17.7308 8.80635 17.7509C9.56936 18.1884 10.1862 19.015 10.1862 20.035C10.1862 20.3039 10.3981 20.5 10.6326 20.5H13.3674C13.6019 20.5 13.8138 20.3039 13.8138 20.035C13.8138 19.015 14.4306 18.1884 15.1937 17.7509L15.6911 18.6184L15.1936 17.7509C15.1937 17.7509 15.1937 17.7509 15.1937 17.7509C15.2287 17.7308 15.2634 17.7105 15.298 17.6898L15.8115 18.5479L15.298 17.6898C16.0536 17.2375 17.0811 17.1038 17.9676 17.6222C18.1739 17.7428 18.4436 17.6765 18.5705 17.4538L19.937 15.0565C20.0684 14.8261 19.9854 14.5372 19.7711 14.4119C18.8895 13.8963 18.4953 12.9395 18.5032 12.062V12.062L18.5034 12.0265L19.497 12.0302L18.5034 12.0264L18.5035 12L18.5032 11.938V11.938C18.4953 11.0605 18.8895 10.1037 19.7711 9.5881C19.9854 9.46279 20.0684 9.17396 19.937 8.94354L18.5705 6.54618C18.4436 6.3235 18.1739 6.25719 17.9676 6.3778C17.0811 6.89623 16.0537 6.76246 15.298 6.31022L15.8115 5.45215L15.298 6.31022C15.2634 6.28953 15.2286 6.26915 15.1937 6.2491C14.4306 5.81161 13.8138 4.98498 13.8138 3.96499C13.8138 3.69609 13.6019 3.5 13.3674 3.5H10.6326ZM8.1862 3.96499C8.1862 2.6157 9.26947 1.5 10.6326 1.5H13.3674C14.7305 1.5 15.8138 2.6157 15.8138 3.96499C15.8138 4.13868 15.9259 4.36351 16.1885 4.51406C16.2343 4.54032 16.2798 4.56699 16.325 4.59407C16.5852 4.74977 16.8228 4.73044 16.958 4.65133C18.1358 3.96259 19.6359 4.37659 20.308 5.55575L21.6746 7.95311C22.3428 9.12533 21.9513 10.6301 20.7807 11.3146C20.6417 11.3959 20.5002 11.6037 20.5031 11.9199C20.5033 11.9466 20.5035 11.9733 20.5035 12L20.5034 12.0339V12.034L20.5031 12.0801C20.5002 12.3963 20.6417 12.6042 20.7807 12.6854C21.9513 13.37 22.3428 14.8747 21.6746 16.0469L20.308 18.4443C19.6359 19.6234 18.1358 20.0374 16.958 19.3487C16.8227 19.2696 16.5852 19.2502 16.325 19.4059C16.2798 19.433 16.2342 19.4597 16.1885 19.4859L15.7151 18.6603L16.1885 19.4859C15.9259 19.6365 15.8138 19.8613 15.8138 20.035C15.8138 21.3843 14.7305 22.5 13.3674 22.5H10.6326C9.26947 22.5 8.1862 21.3843 8.1862 20.035C8.1862 19.8613 8.0741 19.6365 7.81152 19.4859C7.76575 19.4597 7.72023 19.433 7.67497 19.4059C7.41481 19.2502 7.17725 19.2696 7.04197 19.3487C5.86418 20.0374 4.36409 19.6234 3.69195 18.4443L2.32542 16.0469C1.65723 14.8747 2.04873 13.37 3.21928 12.6854C3.35829 12.6042 3.49975 12.3963 3.49689 12.0801L4.49685 12.0711L3.49689 12.0801C3.49665 12.0534 3.49653 12.0267 3.49653 12C3.49653 11.9733 3.49665 11.9466 3.49689 11.9199C3.49975 11.6037 3.35829 11.3959 3.21928 11.3146C2.04873 10.6301 1.65724 9.12533 2.32542 7.95311L3.69195 5.55575C4.3641 4.37659 5.86418 3.96259 7.04197 4.65133C7.17724 4.73044 7.4148 4.74977 7.67495 4.59407L8.18848 5.45215L7.67495 4.59407C7.7202 4.56699 7.76573 4.54032 7.81152 4.51406C8.0741 4.36351 8.1862 4.13868 8.1862 3.96499ZM12 9.2C10.4923 9.2 9.24826 10.4415 9.24826 12C9.24826 13.5585 10.4923 14.8 12 14.8C13.5077 14.8 14.7517 13.5585 14.7517 12C14.7517 10.4415 13.5077 9.2 12 9.2ZM7.24826 12C7.24826 9.36112 9.36367 7.2 12 7.2C14.6363 7.2 16.7517 9.36112 16.7517 12C16.7517 14.6389 14.6363 16.8 12 16.8C9.36367 16.8 7.24826 14.6389 7.24826 12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Time({ className = '' }) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.34315 6.34314C9.46734 3.21895 14.5327 3.21895 17.6569 6.34315C20.781 9.46734 20.781 14.5327 17.6569 17.6569C14.5327 20.781 9.46734 20.781 6.34315 17.6569C3.21895 14.5327 3.21895 9.46734 6.34315 6.34314ZM19.0711 4.92893C15.1658 1.02369 8.83417 1.02369 4.92893 4.92893C1.02369 8.83417 1.02369 15.1658 4.92893 19.0711C8.83418 22.9763 15.1658 22.9763 19.0711 19.0711C22.9763 15.1658 22.9763 8.83418 19.0711 4.92893ZM13 8.5C13 7.94772 12.5523 7.5 12 7.5C11.4477 7.5 11 7.94772 11 8.5V13C11 13.5523 11.4477 14 12 14H15.5C16.0523 14 16.5 13.5523 16.5 13C16.5 12.4477 16.0523 12 15.5 12H13V8.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -1,5 +1,6 @@
 import Attach from './Attach';
 import Back from './Back';
+import ChatSmart from './ChatSmart';
 import Check from './Check';
 import ChevronDown from './ChevronDown';
 import ChevronUp from './ChevronUp';
@@ -7,15 +8,20 @@ import Close from './Close';
 import Copy from './Copy';
 import Document from './Document';
 import Edit from './Edit';
+import Idea from './Idea';
 import More from './More';
+import Refresh from './Refresh';
 import SensitiveHidden from './SensitiveHidden';
 import SensitiveVisible from './SensitiveVisible';
 import Send from './Send';
+import Settings from './Settings';
+import Time from './Time';
 import { Gear } from './Gear';

 export {
  Attach,
  Back,
+  ChatSmart,
  Check,
  ChevronDown,
  ChevronUp,
@@ -23,9 +29,13 @@ export {
  Copy,
  Document,
  Edit,
+  Idea,
  Gear,
  More,
+  Refresh,
  SensitiveHidden,
  SensitiveVisible,
  Send,
+  Settings,
+  Time,
 };
@@ -4,6 +4,8 @@ import { cn } from '../../utils';

 const Popover = PopoverPrimitive.Root;

+const PopoverPortal = PopoverPrimitive.Portal;
+
 const PopoverTrigger = PopoverPrimitive.Trigger;

 const PopoverContent = React.forwardRef<
@@ -16,7 +18,7 @@ const PopoverContent = React.forwardRef<
      align={align}
      sideOffset={sideOffset}
      className={cn(
-        'z-50 w-72 rounded-md border bg-popover dark:bg-dark-popover text-popover-foreground dark:text-goose-text-dark shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-md border bg-app text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className
      )}
      {...props}
@@ -25,4 +27,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;

-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverContent, PopoverPortal };