From 8b9cfebd4240bd4e7cdccf20a3906ad38aa5964b Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Fri, 8 Mar 2024 14:21:48 -0800
Subject: [PATCH] Beam: misc

---
 src/apps/news/news.data.tsx                  |  2 +-
 src/common/components/forms/useLLMSelect.tsx | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/apps/news/news.data.tsx b/src/apps/news/news.data.tsx
index a71242219..665b4ae21 100644
--- a/src/apps/news/news.data.tsx
+++ b/src/apps/news/news.data.tsx
@@ -48,7 +48,7 @@ export const NewsItems: NewsItem[] = [
   /*{
     versionCode: '1.15.0',
     items: [
-      Best-Of
+      Best-Of (Beam)
       Draw
       ...
       Screen Capture (when removed from labs)
diff --git a/src/common/components/forms/useLLMSelect.tsx b/src/common/components/forms/useLLMSelect.tsx
index ffa659050..5c4cfdfb1 100644
--- a/src/common/components/forms/useLLMSelect.tsx
+++ b/src/common/components/forms/useLLMSelect.tsx
@@ -16,11 +16,12 @@ import { IModelVendor } from '~/modules/llms/vendors/IModelVendor';
  * @param localState if true, the state is local to the hook, otherwise the global chat model is changed
  * @param label label of the select, use '' to hide it
  * @param placeholder placeholder of the select
+ * @param isHorizontal if true, the select is horizontal (label - select)
  */
-export function useLLMSelect(localState: boolean = true, label: string = 'Model', placeholder: string = 'Models …'): [DLLM | null, React.JSX.Element | null] {
+export function useLLMSelect(localState: boolean = true, label: string = 'Model', placeholder: string = 'Models …', isHorizontal: boolean = false): [DLLM | null, React.JSX.Element | null] {
 
   // state
-  const localSwitch = React.useRef(localState);
+  const localSwitch = React.useRef(localState).current;
 
   // external state
   const { llms, globalChatLLMId, globalSetChatLLMId } = useModelsStore(state => ({
@@ -33,8 +34,8 @@ export function useLLMSelect(localState: boolean = true, label: string = 'Model'
   const [localLLMId, setLocalLLMId] = React.useState<DLLMId | null>(globalChatLLMId);
 
   // global/local (stable) switch - do not change at runtime
-  const chatLLMId = localSwitch.current ? localLLMId : globalChatLLMId;
-  const setChatLLMId = localSwitch.current ? setLocalLLMId : globalSetChatLLMId;
+  const chatLLMId = localSwitch ? localLLMId : globalChatLLMId;
+  const setChatLLMId = localSwitch ? setLocalLLMId : globalSetChatLLMId;
 
 
   // derived state
@@ -78,7 +79,7 @@ export function useLLMSelect(localState: boolean = true, label: string = 'Model'
 
     // create the component
     return (
-      <FormControl>
+      <FormControl orientation={isHorizontal ? 'horizontal' : undefined}>
         {!!label && <FormLabelStart title={label} />}
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Select
@@ -112,7 +113,7 @@ export function useLLMSelect(localState: boolean = true, label: string = 'Model'
         </Box>
       </FormControl>
     );
-  }, [chatLLMId, label, llms, placeholder, setChatLLMId]);
+  }, [chatLLMId, isHorizontal, label, llms, placeholder, setChatLLMId]);
 
 
   return [chatLLM, component];