💄 style(intervention): polish confirmation bar layout (#14587)

packages/builtin-tool-user-interaction/src/client/Intervention/AskUserQuestion/index.tsx

@@ -133,6 +133,7 @@ const AskUserQuestionIntervention = memo<BuiltinInterventionProps<AskUserQuestio
     }, [escapeActive]);
 
     const isFreeform = !question.fields || question.fields.length === 0;
+    const shouldShowEscapeAction = !isFreeform;
 
     const isSubmitDisabled = escapeActive
       ? !escapeText.trim()
@@ -207,7 +208,7 @@ const AskUserQuestionIntervention = memo<BuiltinInterventionProps<AskUserQuestio
         )}
         <Flexbox horizontal gap={8} justify={'space-between'}>
           <Flexbox horizontal gap={8} justify="flex-start">
-            {escapeActive ? (
+            {escapeActive && shouldShowEscapeAction ? (
               <Text className={styles.escapeLink} type="secondary" onClick={handleEscapeToggle}>
                 <Icon icon={ArrowLeft} /> {t('form.otherBack')}
               </Text>
@@ -216,9 +217,11 @@ const AskUserQuestionIntervention = memo<BuiltinInterventionProps<AskUserQuestio
                 <Text className={styles.escapeLink} type="secondary" onClick={handleSkip}>
                   {t('form.skip')}
                 </Text>
-                <Text className={styles.escapeLink} type="secondary" onClick={handleEscapeToggle}>
+                {shouldShowEscapeAction && (
-                  {t('form.other')} <Icon icon={PenLine} />
+                  <Text className={styles.escapeLink} type="secondary" onClick={handleEscapeToggle}>
-                </Text>
+                    {t('form.other')} <Icon icon={PenLine} />
+                  </Text>
+                )}
               </>
             )}
           </Flexbox>

src/features/Conversation/InterventionBar/style.ts

@@ -2,35 +2,40 @@ import { createStaticStyles } from 'antd-style';
 
 export const styles = createStaticStyles(({ css, cssVar }) => ({
   actions: css`
-    padding-block: 8px;
+    padding-block: 8px 10px;
-    padding-inline: 16px;
+    padding-inline: 10px;
     border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+    background: color-mix(in srgb, ${cssVar.colorBgElevated} 92%, ${cssVar.colorFillSecondary});
 
     &:empty {
       display: none;
     }
   `,
   container: css`
+    overflow: hidden;
     margin-block-end: 12px;
   `,
   content: css`
     overflow-y: auto;
     flex: 1;
     min-height: 0;
-    padding-block: 8px 12px;
+    padding-block: 6px 8px;
   `,
   tab: css`
     cursor: pointer;
 
-    padding-block: 6px;
+    padding-block: 5px;
-    padding-inline: 14px;
+    padding-inline: 10px;
     border-block-end: 2px solid transparent;
 
     font-size: 12px;
     color: ${cssVar.colorTextSecondary};
     white-space: nowrap;
 
-    transition: all 0.2s;
+    transition:
+      border-color 0.2s,
+      color 0.2s,
+      background 0.2s;
 
     &:hover {
       color: ${cssVar.colorText};
@@ -49,8 +54,8 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
   tabCounter: css`
     margin-inline-start: auto;
-    padding-block: 6px;
+    padding-block: 5px;
-    padding-inline: 14px;
+    padding-inline: 10px;
 
     font-size: 11px;
     color: ${cssVar.colorTextTertiary};

src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Intervention/ApprovalActions.tsx

@@ -34,7 +34,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   footer: css`
     display: flex;
     justify-content: flex-end;
-    margin-block-start: 12px;
+    margin-block-start: 8px;
   `,
   number: css`
     flex-shrink: 0;
@@ -49,9 +49,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     gap: 8px;
     align-items: center;
 
-    padding-block: 8px;
+    min-height: 40px;
-    padding-inline: 12px;
+    padding-block: 7px;
-    border-radius: 8px;
+    padding-inline: 16px;
+    border-radius: calc(${cssVar.borderRadiusLG} - 2px);
 
     color: ${cssVar.colorTextSecondary};
 
@@ -121,6 +122,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     margin-inline-start: 6px;
     color: ${cssVar.colorTextTertiary};
   `,
+  submitButton: css`
+    &.ant-btn {
+      min-width: 88px;
+      height: 36px;
+      border-radius: calc(${cssVar.borderRadiusLG} - 2px);
+    }
+  `,
 }));
 
 const ApprovalActions = memo<ApprovalActionsProps>(
@@ -290,9 +298,9 @@ const ApprovalActions = memo<ApprovalActionsProps>(
 
         <div className={styles.footer}>
           <Button
+            className={styles.submitButton}
             disabled={isMessageCreating}
             loading={loading}
-            shape={'round'}
             size={'middle'}
             type={'primary'}
             onClick={handleSubmit}

src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Intervention/Fallback.tsx

@@ -29,7 +29,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     user-select: none;
 
     padding-block: 6px;
-    padding-inline: 16px;
+    padding-inline: 10px;
 
     font-size: 12px;
     color: ${cssVar.colorTextTertiary};
@@ -41,7 +41,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   description: css`
     padding-block: 8px;
     padding-inline: 16px;
+
     font-size: 14px;
+    font-weight: 600;
     color: ${cssVar.colorText};
   `,
 }));