Tweak stop button size in compact mode

Author: wong2

src/app/components/Button.tsx

@@ -9,7 +9,7 @@ export interface Props {
   type?: ButtonHTMLAttributes<HTMLButtonElement>['type']
   onClick?: () => void
   isLoading?: boolean
-  size?: 'small' | 'normal'
+  size?: 'small' | 'normal' | 'tiny'
   icon?: ReactNode
 }
 
@@ -20,8 +20,9 @@ const Button: FC<Props> = (props) => {
     <button
       type={type}
       className={cx(
-        size === 'normal' ? 'rounded-full' : 'rounded-xl',
-        size === 'normal' ? 'text-base font-medium px-6 py-[5px]' : 'text-sm px-4 py-1',
+        size === 'normal' && 'text-base font-medium px-6 py-[5px] rounded-full',
+        size === 'small' && 'text-sm px-4 py-1 rounded-xl',
+        size === 'tiny' && 'text-xs px-3 py-[3px] rounded-lg',
         props.color === 'primary' ? 'text-white bg-primary-blue' : 'text-primary-text bg-secondary',
         props.className,
       )}

src/app/components/Chat/ChatMessageInput.tsx

@@ -194,9 +194,7 @@ const ChatMessageInput: FC<Props> = (props) => {
           autoFocus={props.autoFocus}
         />
       </div>
-      {props.actionButton || (
-        <Button text="-" className="invisible" size={props.mode === 'full' ? 'normal' : 'small'} />
-      )}
+      {props.actionButton || <Button text="-" className="invisible" size={props.mode === 'full' ? 'normal' : 'tiny'} />}
     </form>
   )
 }

src/app/components/Chat/ConversationPanel.tsx

@@ -70,12 +70,7 @@ const ConversationPanel: FC<Props> = (props) => {
   let inputActionButton: ReactNode = null
   if (props.generating) {
     inputActionButton = (
-      <Button
-        text={t('Stop')}
-        color="flat"
-        size={mode === 'full' ? 'normal' : 'small'}
-        onClick={props.stopGenerating}
-      />
+      <Button text={t('Stop')} color="flat" size={mode === 'full' ? 'normal' : 'tiny'} onClick={props.stopGenerating} />
     )
   } else if (mode === 'full') {
     inputActionButton = (
@@ -123,7 +118,9 @@ const ConversationPanel: FC<Props> = (props) => {
         <ChatMessageList botId={props.botId} messages={props.messages} className={marginClass} />
         <div className={cx('mt-3 flex flex-col ', marginClass, mode === 'full' ? 'mb-3' : 'mb-[5px]')}>
           <div className={cx('flex flex-row items-center gap-[5px]', mode === 'full' ? 'mb-3' : 'mb-0')}>
-            {mode === 'compact' && <span className="font-medium text-xs text-light-text">Send to {botInfo.name}</span>}
+            {mode === 'compact' && (
+              <span className="font-medium text-xs text-light-text cursor-default">Send to {botInfo.name}</span>
+            )}
             <hr className="grow border-primary-border" />
           </div>
           <ChatMessageInput