InnoPeak/organizrr
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ make llm picker responsive
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/promote/production Build is passing
Details

Browse Source
This commit is contained in:
RaviAnand Mohabir 2025-04-07 18:47:35 +02:00
parent 420406f9a4
commit 849e41bc06
3 changed files with 101 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/LLMPicker.tsx
View File

@ -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}
>
<IconRobotFace />
<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>
);
}

3
src/MLEngineContext.tsx
View File

@ -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,
}}

132
src/Organizrr.tsx
View File

@ -395,72 +395,74 @@ function Organizrr() {
</Group>
<ScrollArea offsetScrollbars>
<Group wrap="nowrap" align="start">
{form.values.files[activeFile]?.documents.map((d, idx) => (
<Stack
key={`${d.id}-${idx}`}
h={500}
mah={500}
w={300}
style={{ cursor: "pointer" }}
onClick={() => {
setActiveDocumentId(d.id);
openPreview();
}}
>
<Group>
<Text>
{
form.values.documents.find(
(_d) => _d.id === d.id
)?.file.name
}
</Text>
<ActionIcon
ml="auto"
variant="subtle"
color="red"
onClick={(e) => {
e.stopPropagation();
form.removeListItem(
`files.${activeFile}.documents`,
idx
);
}}
>
<IconTrash />
</ActionIcon>
</Group>
{form.values.documents
.find((_d) => _d.id === d.id)
?.file.name.endsWith(".pdf") && (
<Box style={{ flexGrow: 1, minHeight: 0 }}>
<ScrollArea h="100%">
<Document
file={
form.values.documents.find(
(_d) => _d.id === d.id
)?.file
}
className={classNames.pdfPreview}
>
<Page pageNumber={1} scale={0.5} />
</Document>
</ScrollArea>
</Box>
)}
<TextInput
label="Selected pages"
placeholder="1, 3-4, even, odd"
onClick={(e) => e.stopPropagation()}
{...form.getInputProps(
`files.${activeFile}.documents.${idx}.selectedPages`
{form.values.files[activeFile]?.documents.map(
(d, idx) => (
<Stack
key={`${d.id}-${idx}`}
h={500}
mah={500}
w={300}
style={{ cursor: "pointer" }}
onClick={() => {
setActiveDocumentId(d.id);
openPreview();
}}
>
<Group>
<Text>
{
form.values.documents.find(
(_d) => _d.id === d.id
)?.file.name
}
</Text>
<ActionIcon
ml="auto"
variant="subtle"
color="red"
onClick={(e) => {
e.stopPropagation();
form.removeListItem(
`files.${activeFile}.documents`,
idx
);
}}
>
<IconTrash />
</ActionIcon>
</Group>
{form.values.documents
.find((_d) => _d.id === d.id)
?.file.name.endsWith(".pdf") && (
<Box style={{ flexGrow: 1, minHeight: 0 }}>
<ScrollArea h="100%">
<Document
file={
form.values.documents.find(
(_d) => _d.id === d.id
)?.file
}
className={classNames.pdfPreview}
>
<Page pageNumber={1} scale={0.5} />
</Document>
</ScrollArea>
</Box>
)}
key={form.key(
`files.${activeFile}.documents.${idx}.selectedPages`
)}
/>
</Stack>
))}
<TextInput
label="Selected pages"
placeholder="1, 3-4, even, odd"
onClick={(e) => e.stopPropagation()}
{...form.getInputProps(
`files.${activeFile}.documents.${idx}.selectedPages`
)}
key={form.key(
`files.${activeFile}.documents.${idx}.selectedPages`
)}
/>
</Stack>
)
)}
{form.values.documents
.find(
(doc) =>