Cossale/kepler-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

prettify even more

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-18 11:28:28 +01:00
parent e14443149c
commit 13d8257f4a
2 changed files with 16 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/chat/+layout.svelte
View file

@ -641,7 +641,7 @@
>
<form
class={[
'bg-background/50 text-foreground dark:bg-secondary/20 relative flex w-full flex-col items-stretch gap-2 rounded-t-xl border border-b-0 border-white/70 px-3 pt-3 pb-3 outline-8 dark:border-white/10',
'bg-background/50 text-foreground dark:bg-secondary/20 relative flex w-full flex-col items-stretch gap-2 rounded-t-xl border border-b-0 border-white/70 pt-3 pb-3 outline-8 dark:border-white/10',
'transition duration-200',
'outline-primary/1 group-focus-within:outline-primary/10',
]}
@ -724,7 +724,7 @@
{...pick(popover.trigger, ['id', 'style', 'onfocusout', 'onfocus'])}
bind:this={textarea}
disabled={!openRouterKeyQuery.data || isGenerating}
class="text-foreground placeholder:text-muted-foreground/60 max-h-64 min-h-[60px] w-full resize-none !overflow-y-auto bg-transparent text-base leading-6 outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="text-foreground placeholder:text-muted-foreground/60 max-h-64 min-h-[80px] w-full resize-none !overflow-y-auto bg-transparent px-3 text-base leading-6 outline-none disabled:cursor-not-allowed disabled:opacity-50"
placeholder={isGenerating
? 'Generating response...'
: 'Type your message here... Tag rules with @'}
@ -765,7 +765,7 @@
{@attach autosize.attachment}
></textarea>
</div>
<div class="mt-2 -mb-px flex w-full flex-row-reverse justify-between">
<div class="mt-2 -mb-px flex w-full flex-row-reverse justify-between px-2">
<div class="-mt-0.5 -mr-0.5 flex items-center justify-center gap-2">
<Tooltip placement="top">
{#snippet trigger(tooltip)}
@ -791,7 +791,7 @@
{#if currentModelSupportsImages}
<button
type="button"
class="border-border hover:bg-muted flex items-center gap-1 rounded-full border px-2 py-1 text-xs transition-colors disabled:opacity-50"
class="border-border hover:bg-accent/20 flex items-center gap-1 rounded-full border px-2 py-1 text-xs transition-colors disabled:opacity-50"
onclick={() => fileInput?.click()}
disabled={isUploading}
>

25
src/routes/chat/model-picker.svelte
View file

@ -52,14 +52,17 @@
cohere: Cohere,
};
function getModelIcon(modelId: string): typeof LogosClaudeIcon | null {
function getModelIcon(modelId: string): Component | null {
const id = modelId.toLowerCase();
// Model-specific icons take priority
if (id.includes('claude') || id.includes('anthropic')) return LogosClaudeIcon;
if (id.includes('gemini') || id.includes('gemma')) return MaterialIconThemeGeminiAi;
if (id.includes('mistral') || id.includes('mixtral')) return LogosMistralAiIcon;
return null;
// Fallback to company icons
const company = getCompanyFromModelId(modelId);
return companyIcons[company] || null;
}
function getCompanyFromModelId(modelId: string): string {
@ -124,9 +127,6 @@
});
const currentModel = $derived(enabledArr.find((m) => m.model_id === settings.modelId));
const currentCompany = $derived(
currentModel ? getCompanyFromModelId(currentModel.model_id) : 'other'
);
$effect(() => {
if (!enabledArr.find((m) => m.model_id === settings.modelId) && enabledArr.length > 0) {
@ -165,7 +165,7 @@
const cleanId = modelId.replace(/^[^/]+\//, '');
const parts = cleanId.split(/[-_,:]/);
const formattedParts = parts.map(part => {
const formattedParts = parts.map((part) => {
let formatted = capitalize(part);
termReplacements.forEach(({ from, to }) => {
formatted = formatted.replace(new RegExp(`\\b${from}\\b`, 'gi'), to);
@ -176,7 +176,7 @@
return {
full: formattedParts.join(' '),
primary: formattedParts[0] || '',
secondary: formattedParts.slice(1).join(' ')
secondary: formattedParts.slice(1).join(' '),
};
}
</script>
@ -190,14 +190,14 @@
<button
{...popover.trigger}
class={cn(
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
'ring-offset-background focus:ring-ring flex w-full items-center justify-between rounded-lg px-2 py-1 text-xs transition hover:text-white focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
className
)}
aria-expanded={open}
>
<div class="flex items-center gap-2">
{#if companyIcons[currentCompany]}
{@const IconComponent = companyIcons[currentCompany]}
<div class="flex items-center gap-2 pr-2">
{#if currentModel && getModelIcon(currentModel.model_id)}
{@const IconComponent = getModelIcon(currentModel.model_id)}
<IconComponent class="size-4" />
{/if}
<span class="truncate">
@ -261,9 +261,6 @@
{#if getModelIcon(model.model_id)}
{@const ModelIcon = getModelIcon(model.model_id)}
<ModelIcon class="size-6 shrink-0" />
{:else if companyIcons[getCompanyFromModelId(model.model_id)]}
{@const CompanyIcon = companyIcons[getCompanyFromModelId(model.model_id)]}
<CompanyIcon class="size-6 shrink-0" />
{/if}
<p class="font-fake-proxima mt-2 text-center leading-tight font-bold">
{formatted.primary}