Update tokenlens to canary with server side fetching (#1196)
Co-authored-by: josh <josh@afterima.ge>
This commit is contained in:
Nicklas Scharpff
GitHub
parent
445d63e620
commit
5ab695262f
10 changed files with 196 additions and 286 deletions
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { DefaultChatTransport, type LanguageModelUsage } from 'ai';
|
||||
import { DefaultChatTransport } from 'ai';
|
||||
import { useChat } from '@ai-sdk/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import useSWR, { useSWRConfig } from 'swr';
|
||||
|
|
@ -21,6 +21,7 @@ import { useChatVisibility } from '@/hooks/use-chat-visibility';
|
|||
import { useAutoResume } from '@/hooks/use-auto-resume';
|
||||
import { ChatSDKError } from '@/lib/errors';
|
||||
import type { Attachment, ChatMessage } from '@/lib/types';
|
||||
import type { AppUsage } from '@/lib/usage';
|
||||
import { useDataStream } from './data-stream-provider';
|
||||
import {
|
||||
AlertDialog,
|
||||
|
|
@ -50,7 +51,7 @@ export function Chat({
|
|||
isReadonly: boolean;
|
||||
session: Session;
|
||||
autoResume: boolean;
|
||||
initialLastContext?: LanguageModelUsage;
|
||||
initialLastContext?: AppUsage;
|
||||
}) {
|
||||
const { visibilityType } = useChatVisibility({
|
||||
chatId: id,
|
||||
|
|
@ -61,9 +62,7 @@ export function Chat({
|
|||
const { setDataStream } = useDataStream();
|
||||
|
||||
const [input, setInput] = useState<string>('');
|
||||
const [usage, setUsage] = useState<LanguageModelUsage | undefined>(
|
||||
initialLastContext,
|
||||
);
|
||||
const [usage, setUsage] = useState<AppUsage | undefined>(initialLastContext);
|
||||
const [showCreditCardAlert, setShowCreditCardAlert] = useState(false);
|
||||
|
||||
const {
|
||||
|
|
@ -96,9 +95,7 @@ export function Chat({
|
|||
}),
|
||||
onData: (dataPart) => {
|
||||
setDataStream((ds) => (ds ? [...ds, dataPart] : []));
|
||||
if (dataPart.type === 'data-usage') {
|
||||
setUsage(dataPart.data);
|
||||
}
|
||||
if (dataPart.type === 'data-usage') setUsage(dataPart.data);
|
||||
},
|
||||
onFinish: () => {
|
||||
mutate(unstable_serialize(getChatHistoryPaginationKey));
|
||||
|
|
|
|||
|
|
@ -7,20 +7,13 @@ import {
|
|||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ComponentProps } from 'react';
|
||||
import type { LanguageModelUsage } from 'ai';
|
||||
import { breakdownTokens, estimateCost, normalizeUsage } from 'tokenlens';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import type { AppUsage } from '@/lib/usage';
|
||||
|
||||
export type ContextProps = ComponentProps<'button'> & {
|
||||
/** Total context window size in tokens */
|
||||
maxTokens: number;
|
||||
/** Tokens used so far */
|
||||
usedTokens: number;
|
||||
/** Optional full usage payload to enable breakdown view */
|
||||
usage?: LanguageModelUsage | undefined;
|
||||
/** Optional model id (canonical or alias) to compute cost */
|
||||
modelId?: string;
|
||||
usage?: AppUsage;
|
||||
};
|
||||
|
||||
const THOUSAND = 1000;
|
||||
|
|
@ -34,57 +27,6 @@ const ICON_CENTER = 12;
|
|||
const ICON_RADIUS = 10;
|
||||
const ICON_STROKE_WIDTH = 2;
|
||||
|
||||
const formatTokens = (tokens?: number) => {
|
||||
if (tokens === undefined) {
|
||||
return;
|
||||
}
|
||||
if (!Number.isFinite(tokens)) {
|
||||
return;
|
||||
}
|
||||
const abs = Math.abs(tokens);
|
||||
if (abs < THOUSAND) {
|
||||
return `${tokens}`;
|
||||
}
|
||||
if (abs < MILLION) {
|
||||
return `${(tokens / THOUSAND).toFixed(1)}K`;
|
||||
}
|
||||
if (abs < BILLION) {
|
||||
return `${(tokens / MILLION).toFixed(1)}M`;
|
||||
}
|
||||
return `${(tokens / BILLION).toFixed(1)}B`;
|
||||
};
|
||||
|
||||
const formatPercent = (value: number) => {
|
||||
if (!Number.isFinite(value)) {
|
||||
return '0%';
|
||||
}
|
||||
const rounded = Math.round(value * 10) / 10;
|
||||
return Number.isInteger(rounded)
|
||||
? `${Math.trunc(rounded)}%`
|
||||
: `${rounded.toFixed(1)}%`;
|
||||
};
|
||||
|
||||
const formatUSD = (value?: number) => {
|
||||
if (value === undefined || !Number.isFinite(value)) return undefined;
|
||||
const abs = Math.abs(value);
|
||||
// Finer precision for very small amounts common in LLM pricing
|
||||
let decimals = 2;
|
||||
if (abs < 0.001) decimals = 5;
|
||||
else if (abs < 0.01) decimals = 4;
|
||||
else if (abs < 0.1) decimals = 3;
|
||||
else if (abs < 10) decimals = 2;
|
||||
else decimals = 1;
|
||||
const text = value.toFixed(decimals);
|
||||
// Trim trailing zeros/decimal if not needed (e.g., 1.2300 -> 1.23, 2.0 -> 2)
|
||||
const trimmed = text.replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1');
|
||||
return `$${trimmed}`;
|
||||
};
|
||||
|
||||
const formatUSDFixed = (value?: number, decimals = 5) => {
|
||||
if (value === undefined || !Number.isFinite(value)) return undefined;
|
||||
return `$${Number(value).toFixed(decimals)}`;
|
||||
};
|
||||
|
||||
type ContextIconProps = {
|
||||
percent: number; // 0 - 100
|
||||
};
|
||||
|
|
@ -96,7 +38,7 @@ export const ContextIcon = ({ percent }: ContextIconProps) => {
|
|||
|
||||
return (
|
||||
<svg
|
||||
aria-label={`${formatPercent(percent)} of model context used`}
|
||||
aria-label={`${percent.toFixed(2)}% of model context used`}
|
||||
height="28"
|
||||
role="img"
|
||||
style={{ color: 'currentcolor' }}
|
||||
|
|
@ -129,22 +71,6 @@ export const ContextIcon = ({ percent }: ContextIconProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
function TokensWithCost({
|
||||
tokens,
|
||||
costText,
|
||||
}: {
|
||||
tokens?: number;
|
||||
costText?: string;
|
||||
}) {
|
||||
return (
|
||||
<span>
|
||||
{tokens === undefined ? '—' : formatTokens(tokens)}
|
||||
{costText ? (
|
||||
<span className="ml-2 text-muted-foreground">• {costText}</span>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({
|
||||
label,
|
||||
|
|
@ -156,126 +82,36 @@ function InfoRow({
|
|||
costText?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">{label}</span>
|
||||
<TokensWithCost tokens={tokens} costText={costText} />
|
||||
<div className="flex items-center gap-2 font-mono">
|
||||
<span className="text-right min-w-[4ch]">
|
||||
{tokens === undefined ? '—' : tokens.toLocaleString()}
|
||||
</span>
|
||||
{costText !== undefined && costText !== null && !isNaN(parseFloat(costText)) && (
|
||||
<span className="text-muted-foreground">
|
||||
${parseFloat(costText).toFixed(6)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const Context = ({
|
||||
className,
|
||||
maxTokens,
|
||||
usedTokens,
|
||||
usage,
|
||||
modelId,
|
||||
...props
|
||||
}: ContextProps) => {
|
||||
const safeMax = Math.max(0, Number.isFinite(maxTokens) ? maxTokens : 0);
|
||||
const safeUsed = Math.min(
|
||||
Math.max(0, Number.isFinite(usedTokens) ? usedTokens : 0),
|
||||
safeMax,
|
||||
);
|
||||
|
||||
// used percent and used tokens to display (demo-aware)
|
||||
const displayUsedTokens = safeUsed;
|
||||
const usedPercent =
|
||||
safeMax > 0
|
||||
? Math.min(
|
||||
PERCENT_MAX,
|
||||
Math.max(0, (displayUsedTokens / safeMax) * PERCENT_MAX),
|
||||
)
|
||||
: 0;
|
||||
|
||||
const displayPct = formatPercent(Math.round(usedPercent * 10) / 10);
|
||||
|
||||
const used = formatTokens(displayUsedTokens);
|
||||
const total = formatTokens(safeMax);
|
||||
|
||||
const uNorm = normalizeUsage(usage);
|
||||
const uBreakdown = breakdownTokens(usage);
|
||||
|
||||
const hasUsage =
|
||||
!!usage &&
|
||||
((uNorm.input ?? 0) > 0 ||
|
||||
(uNorm.output ?? 0) > 0 ||
|
||||
(uBreakdown.cacheReads ?? 0) > 0 ||
|
||||
(uBreakdown.cacheWrites ?? 0) > 0 ||
|
||||
(uBreakdown.reasoningTokens ?? 0) > 0);
|
||||
|
||||
// Values to render in rows (demo or real)
|
||||
const displayInput = uNorm.input;
|
||||
const displayOutput = uNorm.output;
|
||||
|
||||
// Per-segment costs
|
||||
const inputCostText = modelId
|
||||
? formatUSDFixed(
|
||||
estimateCost({
|
||||
modelId,
|
||||
usage: { input: displayInput ?? 0, output: 0 },
|
||||
}).inputUSD,
|
||||
)
|
||||
: undefined;
|
||||
const outputCostText = modelId
|
||||
? formatUSDFixed(
|
||||
estimateCost({
|
||||
modelId,
|
||||
usage: { input: 0, output: displayOutput ?? 0 },
|
||||
}).outputUSD,
|
||||
)
|
||||
: undefined;
|
||||
// Not supported by tokenlens pricing hints; leave undefined so no bullet is shown
|
||||
const cacheReadsTokens = uBreakdown.cacheReads ?? 0;
|
||||
const cacheWritesTokens = uBreakdown.cacheWrites ?? 0;
|
||||
const cacheReadsCostText =
|
||||
modelId && cacheReadsTokens > 0
|
||||
? formatUSDFixed(
|
||||
estimateCost({
|
||||
modelId,
|
||||
// Cast to any to support extended pricing fields provided by tokenlens
|
||||
usage: { cacheReads: cacheReadsTokens } as any,
|
||||
}).totalUSD,
|
||||
)
|
||||
: undefined;
|
||||
const cacheWritesCostText =
|
||||
modelId && cacheWritesTokens > 0
|
||||
? formatUSDFixed(
|
||||
estimateCost({
|
||||
modelId,
|
||||
usage: { cacheWrites: cacheWritesTokens } as any,
|
||||
}).totalUSD,
|
||||
)
|
||||
: undefined;
|
||||
|
||||
const reasoningTokens = uBreakdown.reasoningTokens ?? 0;
|
||||
let reasoningCostText: string | undefined;
|
||||
if (modelId && reasoningTokens > 0) {
|
||||
const est = estimateCost({
|
||||
modelId,
|
||||
usage: { reasoningTokens },
|
||||
}).totalUSD;
|
||||
// TokenLens does not provide reasoning pricing for some models. Show em dash when unknown.
|
||||
reasoningCostText =
|
||||
est && Number.isFinite(est) && est > 0 ? formatUSDFixed(est) : '—';
|
||||
}
|
||||
|
||||
const costUSD = modelId
|
||||
? estimateCost({
|
||||
modelId,
|
||||
usage: { input: displayInput ?? 0, output: displayOutput ?? 0 },
|
||||
}).totalUSD
|
||||
: undefined;
|
||||
const costText = formatUSDFixed(costUSD);
|
||||
|
||||
const fmtOrUnknown = (n?: number) =>
|
||||
n === undefined ? '—' : formatTokens(n);
|
||||
|
||||
export const Context = ({ className, usage, ...props }: ContextProps) => {
|
||||
const used = usage?.totalTokens ?? 0;
|
||||
const max =
|
||||
usage?.context?.totalMax ??
|
||||
usage?.context?.combinedMax ??
|
||||
usage?.context?.inputMax;
|
||||
const hasMax = typeof max === 'number' && Number.isFinite(max) && max > 0;
|
||||
const usedPercent = hasMax ? Math.min(100, (used / max) * 100) : 0;
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
'inline-flex gap-1 items-center text-sm rounded-md select-none',
|
||||
'inline-flex items-center gap-1 select-none rounded-md text-sm',
|
||||
'cursor-pointer bg-background text-foreground',
|
||||
className,
|
||||
)}
|
||||
|
|
@ -283,58 +119,63 @@ export const Context = ({
|
|||
{...props}
|
||||
>
|
||||
<span className="hidden font-medium text-muted-foreground">
|
||||
{displayPct}
|
||||
{usedPercent.toFixed(1)}%
|
||||
</span>
|
||||
<ContextIcon percent={usedPercent} />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" side="top" className="p-3 w-fit">
|
||||
<DropdownMenuContent align="end" side="top" className="w-fit p-3">
|
||||
<div className="min-w-[240px] space-y-2">
|
||||
<div className="flex justify-between items-start text-sm">
|
||||
<span>{displayPct}</span>
|
||||
<span className="text-muted-foreground">{used} / {total} tokens</span>
|
||||
<div className="flex items-start justify-between text-sm">
|
||||
<span>{usedPercent.toFixed(1)}%</span>
|
||||
<span className="text-muted-foreground">
|
||||
{hasMax ? `${used} / ${max} tokens` : `${used} tokens`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Progress className="h-2 bg-muted" value={usedPercent} />
|
||||
</div>
|
||||
<div className="mt-1 space-y-1">
|
||||
{hasUsage && uBreakdown.cacheReads && uBreakdown.cacheReads > 0 && (
|
||||
{usage?.cachedInputTokens && usage.cachedInputTokens > 0 && (
|
||||
<InfoRow
|
||||
label="Cache Hits"
|
||||
tokens={uBreakdown.cacheReads}
|
||||
costText={cacheReadsCostText}
|
||||
tokens={usage?.cachedInputTokens}
|
||||
costText={usage?.costUSD?.cacheReadUSD?.toString()}
|
||||
/>
|
||||
)}
|
||||
{hasUsage &&
|
||||
uBreakdown.cacheWrites &&
|
||||
uBreakdown.cacheWrites > 0 && (
|
||||
<InfoRow
|
||||
label="Cache Writes"
|
||||
tokens={uBreakdown.cacheWrites}
|
||||
costText={cacheWritesCostText}
|
||||
/>
|
||||
)}
|
||||
<InfoRow
|
||||
label="Input"
|
||||
tokens={displayInput}
|
||||
costText={inputCostText}
|
||||
tokens={usage?.inputTokens}
|
||||
costText={usage?.costUSD?.inputUSD?.toString()}
|
||||
/>
|
||||
<InfoRow
|
||||
label="Output"
|
||||
tokens={displayOutput}
|
||||
costText={outputCostText}
|
||||
tokens={usage?.outputTokens}
|
||||
costText={usage?.costUSD?.outputUSD?.toString()}
|
||||
/>
|
||||
<InfoRow
|
||||
label="Reasoning"
|
||||
tokens={reasoningTokens > 0 ? reasoningTokens : undefined}
|
||||
costText={reasoningCostText}
|
||||
tokens={
|
||||
usage?.reasoningTokens && usage.reasoningTokens > 0
|
||||
? usage.reasoningTokens
|
||||
: undefined
|
||||
}
|
||||
costText={usage?.costUSD?.reasoningUSD?.toString()}
|
||||
/>
|
||||
{costText && (
|
||||
{usage?.costUSD?.totalUSD !== undefined && (
|
||||
<>
|
||||
<Separator className="mt-1" />
|
||||
<div className="flex justify-between items-center pt-1 text-xs">
|
||||
<span className="text-muted-foreground">Total cost</span>
|
||||
<span>{costText}</span>
|
||||
<div className="flex items-center gap-2 font-mono">
|
||||
<span className="text-right min-w-[4ch]"></span>
|
||||
<span>
|
||||
{!isNaN(parseFloat(usage.costUSD.totalUSD.toString()))
|
||||
? `$${parseFloat(usage.costUSD.totalUSD.toString()).toFixed(6)}`
|
||||
: '—'
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -343,4 +184,4 @@ export const Context = ({
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import type { LanguageModelUsage, UIMessage } from 'ai';
|
||||
import type { UIMessage } from 'ai';
|
||||
import {
|
||||
useRef,
|
||||
useEffect,
|
||||
|
|
@ -15,7 +15,13 @@ import {
|
|||
import { toast } from 'sonner';
|
||||
import { useLocalStorage, useWindowSize } from 'usehooks-ts';
|
||||
|
||||
import { ArrowUpIcon, PaperclipIcon, CpuIcon, StopIcon, ChevronDownIcon } from './icons';
|
||||
import {
|
||||
ArrowUpIcon,
|
||||
PaperclipIcon,
|
||||
CpuIcon,
|
||||
StopIcon,
|
||||
ChevronDownIcon,
|
||||
} from './icons';
|
||||
import { PreviewAttachment } from './preview-attachment';
|
||||
import { Button } from './ui/button';
|
||||
import { SuggestedActions } from './suggested-actions';
|
||||
|
|
@ -37,10 +43,10 @@ import { ArrowDown } from 'lucide-react';
|
|||
import { useScrollToBottom } from '@/hooks/use-scroll-to-bottom';
|
||||
import type { VisibilityType } from './visibility-selector';
|
||||
import type { Attachment, ChatMessage } from '@/lib/types';
|
||||
import type { AppUsage } from '@/lib/usage';
|
||||
import { chatModels } from '@/lib/ai/models';
|
||||
import { saveChatModelAsCookie } from '@/app/(chat)/actions';
|
||||
import { startTransition } from 'react';
|
||||
import { getContextWindow, normalizeUsage } from 'tokenlens';
|
||||
import { Context } from './elements/context';
|
||||
import { myProvider } from '@/lib/ai/providers';
|
||||
|
||||
|
|
@ -73,7 +79,7 @@ function PureMultimodalInput({
|
|||
className?: string;
|
||||
selectedVisibilityType: VisibilityType;
|
||||
selectedModelId: string;
|
||||
usage?: LanguageModelUsage;
|
||||
usage?: AppUsage;
|
||||
}) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const { width } = useWindowSize();
|
||||
|
|
@ -193,29 +199,11 @@ function PureMultimodalInput({
|
|||
return myProvider.languageModel(selectedModelId);
|
||||
}, [selectedModelId]);
|
||||
|
||||
const contextMax = useMemo(() => {
|
||||
// Resolve from selected model; stable across chunks.
|
||||
const cw = getContextWindow(modelResolver.modelId);
|
||||
return cw.combinedMax ?? cw.inputMax ?? 0;
|
||||
}, [modelResolver]);
|
||||
|
||||
const usedTokens = useMemo(() => {
|
||||
// Prefer explicit usage data part captured via onData
|
||||
if (!usage) return 0; // update only when final usage arrives
|
||||
const n = normalizeUsage(usage);
|
||||
return typeof n.total === 'number'
|
||||
? n.total
|
||||
: (n.input ?? 0) + (n.output ?? 0);
|
||||
}, [usage]);
|
||||
|
||||
const contextProps = useMemo(
|
||||
() => ({
|
||||
maxTokens: contextMax,
|
||||
usedTokens,
|
||||
usage,
|
||||
modelId: modelResolver.modelId,
|
||||
}),
|
||||
[contextMax, usedTokens, usage, modelResolver],
|
||||
[usage],
|
||||
);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
|
|
@ -253,7 +241,7 @@ function PureMultimodalInput({
|
|||
}, [status, scrollToBottom]);
|
||||
|
||||
return (
|
||||
<div className='flex relative flex-col gap-4 w-full'>
|
||||
<div className="flex relative flex-col gap-4 w-full">
|
||||
<AnimatePresence>
|
||||
{!isAtBottom && (
|
||||
<motion.div
|
||||
|
|
@ -261,7 +249,7 @@ function PureMultimodalInput({
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||||
className='absolute -top-12 left-1/2 z-50 -translate-x-1/2'
|
||||
className="absolute -top-12 left-1/2 z-50 -translate-x-1/2"
|
||||
>
|
||||
<Button
|
||||
data-testid="scroll-to-bottom-button"
|
||||
|
|
@ -299,7 +287,7 @@ function PureMultimodalInput({
|
|||
/>
|
||||
|
||||
<PromptInput
|
||||
className='p-3 rounded-xl border transition-all duration-200 border-border bg-background shadow-xs focus-within:border-border hover:border-muted-foreground/50'
|
||||
className="p-3 rounded-xl border transition-all duration-200 border-border bg-background shadow-xs focus-within:border-border hover:border-muted-foreground/50"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
if (status !== 'ready') {
|
||||
|
|
@ -312,7 +300,7 @@ function PureMultimodalInput({
|
|||
{(attachments.length > 0 || uploadQueue.length > 0) && (
|
||||
<div
|
||||
data-testid="attachments-preview"
|
||||
className='flex overflow-x-scroll flex-row gap-2 items-end'
|
||||
className="flex overflow-x-scroll flex-row gap-2 items-end"
|
||||
>
|
||||
{attachments.map((attachment) => (
|
||||
<PreviewAttachment
|
||||
|
|
@ -342,7 +330,7 @@ function PureMultimodalInput({
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className='flex flex-row gap-1 items-start sm:gap-2'>
|
||||
<div className="flex flex-row gap-1 items-start sm:gap-2">
|
||||
<PromptInputTextarea
|
||||
data-testid="multimodal-input"
|
||||
ref={textareaRef}
|
||||
|
|
@ -352,13 +340,13 @@ function PureMultimodalInput({
|
|||
minHeight={44}
|
||||
maxHeight={200}
|
||||
disableAutoResize={true}
|
||||
className='grow resize-none border-0! p-2 border-none! bg-transparent text-sm outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
|
||||
className="grow resize-none border-0! p-2 border-none! bg-transparent text-sm outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden"
|
||||
rows={1}
|
||||
autoFocus
|
||||
/>{' '}
|
||||
<Context {...contextProps} />
|
||||
</div>
|
||||
<PromptInputToolbar className='!border-top-0 border-t-0! p-0 shadow-none dark:border-0 dark:border-transparent!'>
|
||||
<PromptInputToolbar className="!border-top-0 border-t-0! p-0 shadow-none dark:border-0 dark:border-transparent!">
|
||||
<PromptInputTools className="gap-0 sm:gap-0.5">
|
||||
<AttachmentsButton
|
||||
fileInputRef={fileInputRef}
|
||||
|
|
@ -413,7 +401,7 @@ function PureAttachmentsButton({
|
|||
return (
|
||||
<Button
|
||||
data-testid="attachments-button"
|
||||
className='p-1 h-8 rounded-lg transition-colors aspect-square hover:bg-accent'
|
||||
className="p-1 h-8 rounded-lg transition-colors aspect-square hover:bg-accent"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
fileInputRef.current?.click();
|
||||
|
|
@ -454,26 +442,30 @@ function PureModelSelectorCompact({
|
|||
>
|
||||
<SelectPrimitive.Trigger
|
||||
type="button"
|
||||
className='flex gap-2 items-center px-2 h-8 rounded-lg border-0 shadow-none transition-colors bg-background text-foreground hover:bg-accent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0'
|
||||
className="flex gap-2 items-center px-2 h-8 rounded-lg border-0 shadow-none transition-colors bg-background text-foreground hover:bg-accent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
>
|
||||
<CpuIcon size={16} />
|
||||
<span className="hidden text-xs font-medium sm:block">{selectedModel?.name}</span>
|
||||
<span className="hidden text-xs font-medium sm:block">
|
||||
{selectedModel?.name}
|
||||
</span>
|
||||
<ChevronDownIcon size={16} />
|
||||
</SelectPrimitive.Trigger>
|
||||
<PromptInputModelSelectContent className="min-w-[260px] p-0">
|
||||
<div className="flex flex-col gap-px">
|
||||
{chatModels.map((model) => (
|
||||
<SelectItem key={model.id} value={model.name} className="px-3 py-2 text-xs">
|
||||
<div className="flex flex-col flex-1 gap-1 min-w-0">
|
||||
<div className="text-xs font-medium truncate">
|
||||
{model.name}
|
||||
{chatModels.map((model) => (
|
||||
<SelectItem
|
||||
key={model.id}
|
||||
value={model.name}
|
||||
className="px-3 py-2 text-xs"
|
||||
>
|
||||
<div className="flex flex-col flex-1 gap-1 min-w-0">
|
||||
<div className="text-xs font-medium truncate">{model.name}</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate leading-tight">
|
||||
{model.description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate leading-tight">
|
||||
{model.description}
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectItem>
|
||||
))}
|
||||
</div>
|
||||
</PromptInputModelSelectContent>
|
||||
</PromptInputModelSelect>
|
||||
|
|
@ -504,4 +496,4 @@ function PureStopButton({
|
|||
);
|
||||
}
|
||||
|
||||
const StopButton = memo(PureStopButton);
|
||||
const StopButton = memo(PureStopButton);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue