🐛 fix: improve RunCommand copy button visibility and ActionBar border radius (#12280)

Closes LOBE-4402

packages/builtin-tool-local-system/src/client/Render/RunCommand/index.tsx

@@ -1,5 +1,5 @@
-import type { RunCommandParams, RunCommandResult } from '@lobechat/electron-client-ipc';
-import type { BuiltinRenderProps } from '@lobechat/types';
+import { type RunCommandParams, type RunCommandResult } from '@lobechat/electron-client-ipc';
+import { type BuiltinRenderProps } from '@lobechat/types';
 import { Block, Flexbox, Highlighter } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { memo } from 'react';
@@ -7,7 +7,12 @@ import { memo } from 'react';
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     overflow: hidden;
-    padding-inline: 8px 0;
+    padding-inline: 8px;
+
+    & .ant-highlighter-highlighter-hover-actions {
+      inset-block-start: 4px;
+      inset-inline-end: 4px;
+    }
   `,
   head: css`
     font-family: ${cssVar.fontFamilyCode};
@@ -41,12 +46,12 @@ const RunCommand = memo<BuiltinRenderProps<RunCommandParams, RunCommandState>>(
 
     return (
       <Flexbox className={styles.container} gap={8}>
-        <Block gap={8} padding={8} variant={'outlined'}>
+        <Block gap={8} padding={'0 8px 0'} variant={'outlined'}>
           <Highlighter
             wrap
             language={'sh'}
             showLanguage={false}
-            style={{ paddingInline: 8 }}
+            style={{ padding: 8 }}
             variant={'borderless'}
           >
             {args.command}

src/features/ChatInput/ActionBar/Model/index.tsx

@@ -56,7 +56,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
 const ModelSwitch = memo(() => {
   const { t } = useTranslation('chat');
-  const { dropdownPlacement } = useActionBarContext();
+  const { borderRadius, dropdownPlacement } = useActionBarContext();
 
   const agentId = useAgentId();
   const [model, provider, updateAgentConfigById] = useAgentStore((s) => [
@@ -77,7 +77,12 @@ const ModelSwitch = memo(() => {
   );
 
   return (
-    <Flexbox horizontal align={'center'} className={isModelHasExtendParams ? styles.container : ''}>
+    <Flexbox
+      horizontal
+      align={'center'}
+      className={isModelHasExtendParams ? styles.container : ''}
+      style={borderRadius ? { borderRadius } : undefined}
+    >
       <ModelSwitchPanel
         model={model}
         placement={dropdownPlacement}
@@ -87,6 +92,7 @@ const ModelSwitch = memo(() => {
         <Center
           className={cx(styles.model, isModelHasExtendParams && styles.modelWithControl)}
           height={36}
+          style={borderRadius ? { borderRadius } : undefined}
           width={36}
         >
           <div className={styles.icon}>
@@ -99,7 +105,7 @@ const ModelSwitch = memo(() => {
         <Action
           icon={Settings2Icon}
           showTooltip={false}
-          style={{ borderRadius: 24, marginInlineStart: -4 }}
+          style={{ borderRadius: borderRadius ?? 24, marginInlineStart: -4 }}
           title={t('extendParams.title')}
           popover={{
             content: <ControlsForm />,

src/features/ChatInput/ActionBar/context.ts

@@ -8,6 +8,7 @@ import { createContext, useContext } from 'react';
 type DropdownPlacement = 'bottom' | 'bottomLeft' | 'bottomRight' | 'top' | 'topLeft' | 'topRight';
 
 export interface ActionBarContextValue {
+  borderRadius?: number;
   dropdownPlacement?: DropdownPlacement;
 }
 

src/features/ChatInput/ActionBar/index.tsx

@@ -44,43 +44,49 @@ const mapActionsToItems = (keys: ActionKeys[]): ChatInputActionsProps['items'] =
   });
 
 export interface ActionToolbarProps {
+  borderRadius?: number;
   dropdownPlacement?: DropdownPlacement;
   extraActionItems?: ChatInputActionsProps['items'];
 }
 
-const ActionToolbar = memo<ActionToolbarProps>(({ dropdownPlacement, extraActionItems = [] }) => {
-  const [expandInputActionbar, toggleExpandInputActionbar] = useGlobalStore((s) => [
-    systemStatusSelectors.expandInputActionbar(s),
-    s.toggleExpandInputActionbar,
-  ]);
-  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
+const ActionToolbar = memo<ActionToolbarProps>(
+  ({ borderRadius, dropdownPlacement, extraActionItems = [] }) => {
+    const [expandInputActionbar, toggleExpandInputActionbar] = useGlobalStore((s) => [
+      systemStatusSelectors.expandInputActionbar(s),
+      s.toggleExpandInputActionbar,
+    ]);
+    const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
 
-  const leftActions = useChatInputStore((s) =>
-    s.leftActions.filter((item) => (enableRichRender ? true : item !== 'typo')),
-  );
+    const leftActions = useChatInputStore((s) =>
+      s.leftActions.filter((item) => (enableRichRender ? true : item !== 'typo')),
+    );
 
-  const mobile = useChatInputStore((s) => s.mobile);
+    const mobile = useChatInputStore((s) => s.mobile);
 
-  const items = useMemo(
-    () => (mapActionsToItems(leftActions) ?? []).concat(extraActionItems),
-    [extraActionItems, leftActions],
-  );
+    const items = useMemo(
+      () => (mapActionsToItems(leftActions) ?? []).concat(extraActionItems),
+      [extraActionItems, leftActions],
+    );
 
-  const contextValue = useMemo(() => ({ dropdownPlacement }), [dropdownPlacement]);
+    const contextValue = useMemo(
+      () => ({ borderRadius, dropdownPlacement }),
+      [borderRadius, dropdownPlacement],
+    );
 
-  return (
-    <ActionBarContext value={contextValue}>
-      <ChatInputActions
-        collapseOffset={mobile ? 48 : 80}
-        defaultGroupCollapse={true}
-        groupCollapse={!expandInputActionbar}
-        items={items}
-        onGroupCollapseChange={(v) => {
-          toggleExpandInputActionbar(!v);
-        }}
-      />
-    </ActionBarContext>
-  );
-});
+    return (
+      <ActionBarContext value={contextValue}>
+        <ChatInputActions
+          collapseOffset={mobile ? 48 : 80}
+          defaultGroupCollapse={true}
+          groupCollapse={!expandInputActionbar}
+          items={items}
+          onGroupCollapseChange={(v) => {
+            toggleExpandInputActionbar(!v);
+          }}
+        />
+      </ActionBarContext>
+    );
+  },
+);
 
 export default ActionToolbar;

src/features/ChatInput/Desktop/index.tsx

@@ -53,7 +53,7 @@ const styles = createStaticStyles(({ css }) => ({
 }));
 
 interface DesktopChatInputProps extends ActionToolbarProps {
-  extenHeaderContent?: ReactNode;
+  extentHeaderContent?: ReactNode;
   inputContainerProps?: ChatInputProps;
   showFootnote?: boolean;
 }
@@ -62,7 +62,8 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
   ({
     showFootnote,
     inputContainerProps,
-    extenHeaderContent,
+    extentHeaderContent,
+    borderRadius,
     extraActionItems,
     dropdownPlacement,
   }) => {
@@ -111,6 +112,7 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
               style={{ paddingRight: 8 }}
               left={
                 <ActionBar
+                  borderRadius={borderRadius}
                   dropdownPlacement={dropdownPlacement}
                   extraActionItems={extraActionItems}
                 />
@@ -119,7 +121,7 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
           }
           header={
             <Flexbox gap={0}>
-              {extenHeaderContent}
+              {extentHeaderContent}
               {showTypoBar && <TypoBar />}
               {contextContainerNode}
             </Flexbox>

src/features/Conversation/ChatInput/index.tsx

@@ -154,7 +154,7 @@ const ChatInput = memo<ChatInputProps>(
             />
           </Flexbox>
         )}
-        <DesktopChatInput />
+        <DesktopChatInput borderRadius={12} />
       </WideScreenContainer>
     );