feat: disable insteaed of hiding UI buttons if the user explicitely r…

…enders them (#771)
Yonom · Sep 8, 2024 · ded8b64 · ded8b64
1 parent 79d7a14
commit ded8b64
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/packages/react/src/ui/assistant-action-bar.tsx b/packages/react/src/ui/assistant-action-bar.tsx
@@ -117,9 +117,9 @@ const AssistantActionBarSpeak = forwardRef<
     } = {},
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  if (!allowSpeak) return null;
+
   return (
-    <ActionBarPrimitive.Speak asChild>
+    <ActionBarPrimitive.Speak disabled={!allowSpeak} asChild>
       <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
         {props.children ?? <AudioLinesIcon />}
       </TooltipIconButton>
@@ -141,9 +141,9 @@ const AssistantActionBarStopSpeaking = forwardRef<
     } = {},
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  if (!allowSpeak) return null;
+
   return (
-    <ActionBarPrimitive.StopSpeaking asChild>
+    <ActionBarPrimitive.StopSpeaking disabled={!allowSpeak} asChild>
       <TooltipIconButton tooltip={stopTooltip} {...props} ref={ref}>
         {props.children ?? <StopCircleIcon />}
       </TooltipIconButton>
@@ -163,9 +163,8 @@ const AssistantActionBarReload = forwardRef<
     } = {},
   } = useThreadConfig();
   const allowReload = useAllowReload();
-  if (!allowReload) return null;
   return (
-    <ActionBarPrimitive.Reload asChild>
+    <ActionBarPrimitive.Reload disabled={!allowReload} asChild>
       <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
         <RefreshCwIcon />
       </TooltipIconButton>

diff --git a/packages/react/src/ui/branch-picker.tsx b/packages/react/src/ui/branch-picker.tsx
@@ -12,11 +12,11 @@ import { useThreadConfig } from "./thread-config";
 import { BranchPickerPrimitive } from "../primitives";
 import { useThreadContext } from "../context";
 
-const useAllowBranchPicker = () => {
+const useAllowBranchPicker = (ensureCapability = false) => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
   const { useThread } = useThreadContext();
   const branchPickerSupported = useThread((t) => t.capabilities.edit);
-  return branchPickerSupported && allowBranchPicker;
+  return allowBranchPicker && (!ensureCapability || branchPickerSupported);
 };
 
 const BranchPicker: FC = () => {
@@ -48,8 +48,9 @@ const BranchPickerPrevious = forwardRef<
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {},
     } = {},
   } = useThreadConfig();
+  const allowBranchPicker = useAllowBranchPicker();
   return (
-    <BranchPickerPrimitive.Previous asChild>
+    <BranchPickerPrimitive.Previous disabled={!allowBranchPicker} asChild>
       <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
         {props.children ?? <ChevronLeftIcon />}
       </TooltipIconButton>
@@ -83,8 +84,9 @@ const BranchPickerNext = forwardRef<
   const {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {},
   } = useThreadConfig();
+  const allowBranchPicker = useAllowBranchPicker();
   return (
-    <BranchPickerPrimitive.Next asChild>
+    <BranchPickerPrimitive.Next disabled={!allowBranchPicker} asChild>
       <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
         {props.children ?? <ChevronRightIcon />}
       </TooltipIconButton>

diff --git a/packages/react/src/ui/user-action-bar.tsx b/packages/react/src/ui/user-action-bar.tsx
@@ -45,9 +45,8 @@ const UserActionBarEdit = forwardRef<
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {},
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
-  if (!allowEdit) return null;
   return (
-    <ActionBarPrimitive.Edit asChild>
+    <ActionBarPrimitive.Edit disabled={!allowEdit} asChild>
       <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
         {props.children ?? <PencilIcon />}
       </TooltipIconButton>