Refactor bot switch dropdown

Author: wong2

src/app/components/Chat/ChatbotName.tsx

@@ -0,0 +1,32 @@
+import { FC, memo } from 'react'
+import dropdownIcon from '~/assets/icons/dropdown.svg'
+import { BotId } from '~app/bots'
+import SwitchBotDropdown from '../SwitchBotDropdown'
+import Tooltip from '../Tooltip'
+
+interface Props {
+  botId: BotId
+  name: string
+  fullName?: string
+  onSwitchBot?: (botId: BotId) => void
+}
+
+const ChatbotName: FC<Props> = (props) => {
+  const node = (
+    <Tooltip content={props.fullName || props.name}>
+      <span className="font-semibold text-primary-text text-sm cursor-pointer">{props.name}</span>
+    </Tooltip>
+  )
+  if (!props.onSwitchBot) {
+    return node
+  }
+  const triggerNode = (
+    <div className="flex flex-row items-center gap-[2px]">
+      {node}
+      <img src={dropdownIcon} className="w-5 h-5" />
+    </div>
+  )
+  return <SwitchBotDropdown selectedBotId={props.botId} onChange={props.onSwitchBot} triggerNode={triggerNode} />
+}
+
+export default memo(ChatbotName)

src/app/components/Chat/ConversationPanel.tsx

@@ -18,6 +18,7 @@ import Tooltip from '../Tooltip'
 import ChatMessageInput from './ChatMessageInput'
 import ChatMessageList from './ChatMessageList'
 import WebAccessCheckbox from './WebAccessCheckbox'
+import ChatbotName from './ChatbotName'
 
 interface Props {
   botId: BotId
@@ -93,15 +94,15 @@ const ConversationPanel: FC<Props> = (props) => {
           <div className="flex flex-row items-center">
             <motion.img
               src={botInfo.avatar}
-              className="w-[18px] h-[18px] object-contain rounded-full"
+              className="w-[18px] h-[18px] object-contain rounded-full mr-2"
               whileHover={{ rotate: 180 }}
             />
-            <Tooltip content={props.bot.name || botInfo.name}>
-              <span className="font-semibold text-primary-text text-sm cursor-default ml-2 mr-1">{botInfo.name}</span>
-            </Tooltip>
-            {mode === 'compact' && props.onSwitchBot && (
-              <SwitchBotDropdown selectedBotId={props.botId} onChange={props.onSwitchBot} />
-            )}
+            <ChatbotName
+              botId={props.botId}
+              name={botInfo.name}
+              fullName={props.bot.name}
+              onSwitchBot={mode === 'compact' ? props.onSwitchBot : undefined}
+            />
           </div>
           <WebAccessCheckbox botId={props.botId} />
           <div className="flex flex-row items-center gap-3">

src/app/components/SwitchBotDropdown.tsx

@@ -1,29 +1,19 @@
 import { Menu, Transition } from '@headlessui/react'
-import { FC, Fragment, useCallback } from 'react'
-import dropdownIcon from '~/assets/icons/dropdown.svg'
+import { FC, Fragment, ReactNode } from 'react'
 import { BotId } from '~app/bots'
 import { useEnabledBots } from '~app/hooks/use-enabled-bots'
 
 interface Props {
+  triggerNode: ReactNode
   selectedBotId: BotId
   onChange: (botId: BotId) => void
 }
 
 const SwitchBotDropdown: FC<Props> = (props) => {
   const enabledBots = useEnabledBots()
-
-  const onSelect = useCallback(
-    (botId: BotId) => {
-      props.onChange(botId)
-    },
-    [props],
-  )
-
   return (
     <Menu as="div" className="relative inline-block text-left h-5">
-      <Menu.Button>
-        <img src={dropdownIcon} className="w-5 h-5" />
-      </Menu.Button>
+      <Menu.Button className="flex">{props.triggerNode}</Menu.Button>
       <Transition
         as={Fragment}
         enter="transition ease-out duration-100"
@@ -42,7 +32,7 @@ const SwitchBotDropdown: FC<Props> = (props) => {
               <Menu.Item key={botId}>
                 <div
                   className="px-4 py-2 ui-active:bg-primary-blue ui-active:text-white ui-not-active:text-secondary-text cursor-pointer flex flex-row items-center gap-3 pr-8"
-                  onClick={() => onSelect(botId)}
+                  onClick={() => props.onChange(botId)}
                 >
                   <div className="w-4 h-4">
                     <img src={bot.avatar} className="w-4 h-4" />

src/app/pages/SidePanelPage.tsx

@@ -1,12 +1,12 @@
-import { cx } from '~/utils'
 import { useAtom } from 'jotai'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import clearIcon from '~/assets/icons/clear.svg'
+import { cx } from '~/utils'
 import Button from '~app/components/Button'
 import ChatMessageInput from '~app/components/Chat/ChatMessageInput'
 import ChatMessageList from '~app/components/Chat/ChatMessageList'
-import SwitchBotDropdown from '~app/components/SwitchBotDropdown'
+import ChatbotName from '~app/components/Chat/ChatbotName'
 import { CHATBOTS } from '~app/consts'
 import { ConversationContext, ConversationContextValue } from '~app/context'
 import { useChat } from '~app/hooks/use-chat'
@@ -43,8 +43,7 @@ function SidePanelPage() {
         <div className="border-b border-solid border-primary-border flex flex-row items-center justify-between gap-2 py-3 mx-3">
           <div className="flex flex-row items-center gap-2">
             <img src={botInfo.avatar} className="w-4 h-4 object-contain rounded-full" />
-            <span className="font-semibold text-primary-text text-xs">{botInfo.name}</span>
-            <SwitchBotDropdown selectedBotId={botId} onChange={setBotId} />
+            <ChatbotName botId={botId} name={botInfo.name} onSwitchBot={setBotId} />
           </div>
           <div className="flex flex-row items-center gap-3">
             <img