feat: ✨ make llm picker responsive

src/LLMPicker.tsx

@@ -1,20 +1,26 @@
 import {
+  ActionIcon,
+  Drawer,
   Group,
   Indicator,
   Progress,
   Select,
   Stack,
+  StackProps,
   Tooltip,
 } from "@mantine/core";
 
 import { IconRobotFace } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
 import { useMLEngine } from "./MLEngineContext";
 
-function LLMPicker() {
+function LLMPicker(props: StackProps) {
+  const [opened, { open, close }] = useDisclosure(false);
+
   const { loadingModel, activeModel, selectModel, modelList } = useMLEngine();
 
   return (
-    <Stack>
+    <Stack {...props}>
       <Group>
         <Tooltip
           label={
@@ -29,7 +35,9 @@ function LLMPicker() {
             color={activeModel ? (loadingModel ? "" : "green") : "orange"}
             processing={loadingModel !== null}
           >
+            <ActionIcon variant="subtle" onClick={open}>
               <IconRobotFace />
+            </ActionIcon>
           </Indicator>
         </Tooltip>
         {modelList && (
@@ -37,14 +45,34 @@ function LLMPicker() {
             data={modelList}
             value={activeModel}
             onChange={(val) => val && selectModel(val)}
+            placeholder="Select a model..."
             searchable
             clearable
+            visibleFrom="sm"
           />
         )}
       </Group>
       {loadingModel && (
         <Progress value={loadingModel.progress} striped animated />
       )}
+
+      <Drawer
+        offset={8}
+        radius="md"
+        opened={opened}
+        onClose={close}
+        title="Select model"
+        position="bottom"
+        size={200}
+      >
+        <Select
+          data={modelList}
+          value={activeModel}
+          onChange={(val) => val && selectModel(val)}
+          searchable
+          clearable
+        />
+      </Drawer>
     </Stack>
   );
 }

src/MLEngineContext.tsx

@@ -53,6 +53,7 @@ const modelList = [
 
 type MLEngineContext = {
   activeModel: string | null;
+  selectedModel: string | null;
   loadingModel: {
     name: string;
     progress: number;
@@ -67,6 +68,7 @@ type MLEngineContext = {
 
 const MLEngineContext = createContext<MLEngineContext>({
   activeModel: null,
+  selectedModel: null,
   loadingModel: null,
   engine: { current: null },
   selectModel: () => {},
@@ -128,6 +130,7 @@ export function MLEngineContextProvider({ children }: { children: ReactNode }) {
             ? { name: loadingModel, progress: loadingProgress }
             : null,
         activeModel: runningModel,
+        selectedModel,
         selectModel: setSelectedModel,
         modelList,
       }}

src/Organizrr.tsx

@@ -395,7 +395,8 @@ function Organizrr() {
                   </Group>
                   <ScrollArea offsetScrollbars>
                     <Group wrap="nowrap" align="start">
-                      {form.values.files[activeFile]?.documents.map((d, idx) => (
+                      {form.values.files[activeFile]?.documents.map(
+                        (d, idx) => (
                           <Stack
                             key={`${d.id}-${idx}`}
                             h={500}
@@ -460,7 +461,8 @@ function Organizrr() {
                               )}
                             />
                           </Stack>
-                      ))}
+                        )
+                      )}
                       {form.values.documents
                         .find(
                           (doc) =>