Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 09:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

✨ feat: Add Google Parameters, Ollama/Openrouter Reasoning, & UI Optimizations (#5456)

Browse source 
* feat: Google Model Parameters

* fix: dynamic input number value, previously coerced by zod schema

* refactor: support openrouter reasoning tokens and XML for thinking directive to conform to ollama

* fix: virtualize combobox to prevent performance drop on re-renders of long model/agent/assistant lists

* refactor: simplify Fork component by removing unnecessary chat context index

* fix: prevent rendering of Thinking component when children are null

* refactor: update Markdown component to replace <think> tags and simplify remarkPlugins configuration

* refactor: reorder remarkPlugins to improve plugin configuration in Markdown component
This commit is contained in:
Danny Avila 2025-01-24 18:15:47 -05:00 • committed by GitHub
parent 7818ae5c60
commit af430e46f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 200 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

72
client/src/components/ui/ControlCombobox.tsx
View file

@ -1,5 +1,6 @@
import * as Ariakit from '@ariakit/react';
import { matchSorter } from 'match-sorter';
import { AutoSizer, List } from 'react-virtualized';
import { startTransition, useMemo, useState, useEffect, useRef, memo } from 'react';
import { cn } from '~/utils';
import type { OptionWithIcon } from '~/common';
@ -17,6 +18,8 @@ interface ControlComboboxProps {
SelectIcon?: React.ReactNode;
}
const ROW_HEIGHT = 36;
function ControlCombobox({
selectedValue,
displayValue,
@ -45,6 +48,39 @@ function ControlCombobox({
}
}, [isCollapsed]);
const rowRenderer = ({
index,
key,
style,
}: {
index: number;
key: string;
style: React.CSSProperties;
}) => {
const item = matches[index];
return (
<Ariakit.SelectItem
key={key}
value={`${item.value ?? ''}`}
aria-label={`${item.label ?? item.value ?? ''}`}
className={cn(
'flex cursor-pointer items-center px-3 text-sm',
'text-text-primary hover:bg-surface-tertiary',
'data-[active-item]:bg-surface-tertiary',
)}
render={<Ariakit.ComboboxItem />}
style={style}
>
{item.icon != null && (
<div className="assistant-item mr-2 flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
{item.icon}
</div>
)}
<span className="flex-grow truncate text-left">{item.label}</span>
</Ariakit.SelectItem>
);
};
return (
<div className="flex w-full items-center justify-center px-1">
<Ariakit.ComboboxProvider
@ -93,28 +129,20 @@ function ControlCombobox({
/>
</div>
</div>
<Ariakit.ComboboxList className="max-h-[50vh] overflow-auto">
{matches.map((item) => (
<Ariakit.SelectItem
key={item.value}
value={`${item.value ?? ''}`}
aria-label={`${item.label ?? item.value ?? ''}`}
className={cn(
'flex cursor-pointer items-center px-3 py-2 text-sm',
'text-text-primary hover:bg-surface-tertiary',
'data-[active-item]:bg-surface-tertiary',
)}
render={<Ariakit.ComboboxItem />}
>
{item.icon != null && (
<div className="assistant-item mr-2 flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
{item.icon}
</div>
)}
<span className="flex-grow truncate text-left">{item.label}</span>
</Ariakit.SelectItem>
))}
</Ariakit.ComboboxList>
<div className="max-h-[50vh]">
<AutoSizer disableHeight>
{({ width }) => (
<List
width={width}
height={Math.min(matches.length * ROW_HEIGHT, 300)}
rowCount={matches.length}
rowHeight={ROW_HEIGHT}
rowRenderer={rowRenderer}
overscanRowCount={5}
/>
)}
</AutoSizer>
</div>
</Ariakit.SelectPopover>
</Ariakit.SelectProvider>
</Ariakit.ComboboxProvider>