Refactor EndpointItem, EndpointItems, and NewConversationMenu for bet…

…ter user experience - The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`. - `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list. - `NewConversationMenu` now has a gap between the endpoint options to improve user experience.
danny-avila · danny-avila · Jun 2, 2023 · May 20, 2023 · May 20, 2023 · May 20, 2023
commit acbaa6d015630d9f396e1a23b8fa03f83eaa10ba
diff --git a/client/src/components/Input/NewConversationMenu/EndpointItem.jsx b/client/src/components/Input/NewConversationMenu/EndpointItem.jsx
@@ -6,6 +6,7 @@ import { useRecoilValue } from 'recoil';
 import SetTokenDialog from '../SetTokenDialog';
 
 import store from '../../../store';
+import { cn } from '~/utils/index.jsx';
 
 const alternateName = {
   openAI: 'OpenAI',
@@ -15,7 +16,7 @@ const alternateName = {
   google: 'PaLM'
 };
 
-export default function ModelItem({ endpoint, value, onSelect }) {
+export default function ModelItem({ endpoint, value, isSelected }) {
   const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
@@ -33,15 +34,21 @@ export default function ModelItem({ endpoint, value, onSelect }) {
     <>
       <DropdownMenuRadioItem
         value={value}
-        className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
+        className={cn(
+          'group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800',
+          isSelected && 'dark:bg-gray-900'
+        )}
       >
         {icon}
         {alternateName[endpoint] || endpoint}
         {!!['azureOpenAI', 'openAI'].find((e) => e === endpoint) && <sup>$</sup>}
         <div className="flex w-4 flex-1" />
         {isUserProvided ? (
           <button
-            className="invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200"
+            className={cn(
+              'invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200',
+              isSelected && 'visible text-gray-700 dark:text-gray-200'
+            )}
             onClick={(e) => {
               e.preventDefault();
               setSetTokenDialogOpen(true);

diff --git a/client/src/components/Input/NewConversationMenu/EndpointItems.jsx b/client/src/components/Input/NewConversationMenu/EndpointItems.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import EndpointItem from './EndpointItem.jsx';
 
-export default function EndpointItems({ endpoints, onSelect }) {
+export default function EndpointItems({ endpoints, onSelect, selectedEndpoint }) {
   return (
     <>
       {endpoints.map((endpoint) => (
-        <EndpointItem key={endpoint} value={endpoint} onSelect={onSelect} endpoint={endpoint} />
+        <EndpointItem isSelected={selectedEndpoint === endpoint} key={endpoint} value={endpoint} onSelect={onSelect} endpoint={endpoint} />
       ))}
     </>
   );

diff --git a/client/src/components/Input/NewConversationMenu/index.jsx b/client/src/components/Input/NewConversationMenu/index.jsx
@@ -149,11 +149,11 @@ export default function NewConversationMenu() {
           <DropdownMenuRadioGroup
             value={endpoint}
             onValueChange={onSelectEndpoint}
-            className="overflow-y-auto"
+            className="overflow-y-auto gap-1 flex flex-col"
           >
             {showEndpoints &&
               (availableEndpoints.length ? (
-                <EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
+                <EndpointItems selectedEndpoint={endpoint} endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
               ) : (
                 <DropdownMenuLabel className="dark:text-gray-300">
                   No endpoint available.