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 <form
class={[ 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', 'transition duration-200',
'outline-primary/1 group-focus-within:outline-primary/10', 'outline-primary/1 group-focus-within:outline-primary/10',
]} ]}
@ -724,7 +724,7 @@
{...pick(popover.trigger, ['id', 'style', 'onfocusout', 'onfocus'])} {...pick(popover.trigger, ['id', 'style', 'onfocusout', 'onfocus'])}
bind:this={textarea} bind:this={textarea}
disabled={!openRouterKeyQuery.data || isGenerating} 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 placeholder={isGenerating
? 'Generating response...' ? 'Generating response...'
: 'Type your message here... Tag rules with @'} : 'Type your message here... Tag rules with @'}
@ -765,7 +765,7 @@
{@attach autosize.attachment} {@attach autosize.attachment}
></textarea> ></textarea>
</div> </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"> <div class="-mt-0.5 -mr-0.5 flex items-center justify-center gap-2">
<Tooltip placement="top"> <Tooltip placement="top">
{#snippet trigger(tooltip)} {#snippet trigger(tooltip)}
@ -791,7 +791,7 @@
{#if currentModelSupportsImages} {#if currentModelSupportsImages}
<button <button
type="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()} onclick={() => fileInput?.click()}
disabled={isUploading} disabled={isUploading}
> >

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

@ -52,14 +52,17 @@
cohere: Cohere, cohere: Cohere,
}; };
function getModelIcon(modelId: string): typeof LogosClaudeIcon | null { function getModelIcon(modelId: string): Component | null {
const id = modelId.toLowerCase(); const id = modelId.toLowerCase();
// Model-specific icons take priority
if (id.includes('claude') || id.includes('anthropic')) return LogosClaudeIcon; if (id.includes('claude') || id.includes('anthropic')) return LogosClaudeIcon;
if (id.includes('gemini') || id.includes('gemma')) return MaterialIconThemeGeminiAi; if (id.includes('gemini') || id.includes('gemma')) return MaterialIconThemeGeminiAi;
if (id.includes('mistral') || id.includes('mixtral')) return LogosMistralAiIcon; 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 { function getCompanyFromModelId(modelId: string): string {
@ -124,9 +127,6 @@
}); });
const currentModel = $derived(enabledArr.find((m) => m.model_id === settings.modelId)); const currentModel = $derived(enabledArr.find((m) => m.model_id === settings.modelId));
const currentCompany = $derived(
currentModel ? getCompanyFromModelId(currentModel.model_id) : 'other'
);
$effect(() => { $effect(() => {
if (!enabledArr.find((m) => m.model_id === settings.modelId) && enabledArr.length > 0) { if (!enabledArr.find((m) => m.model_id === settings.modelId) && enabledArr.length > 0) {
@ -164,8 +164,8 @@
function formatModelName(modelId: string) { function formatModelName(modelId: string) {
const cleanId = modelId.replace(/^[^/]+\//, ''); const cleanId = modelId.replace(/^[^/]+\//, '');
const parts = cleanId.split(/[-_,:]/); const parts = cleanId.split(/[-_,:]/);
const formattedParts = parts.map(part => { const formattedParts = parts.map((part) => {
let formatted = capitalize(part); let formatted = capitalize(part);
termReplacements.forEach(({ from, to }) => { termReplacements.forEach(({ from, to }) => {
formatted = formatted.replace(new RegExp(`\\b${from}\\b`, 'gi'), to); formatted = formatted.replace(new RegExp(`\\b${from}\\b`, 'gi'), to);
@ -176,7 +176,7 @@
return { return {
full: formattedParts.join(' '), full: formattedParts.join(' '),
primary: formattedParts[0] || '', primary: formattedParts[0] || '',
secondary: formattedParts.slice(1).join(' ') secondary: formattedParts.slice(1).join(' '),
}; };
} }
</script> </script>
@ -190,14 +190,14 @@
<button <button
{...popover.trigger} {...popover.trigger}
class={cn( 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 className
)} )}
aria-expanded={open} aria-expanded={open}
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 pr-2">
{#if companyIcons[currentCompany]} {#if currentModel && getModelIcon(currentModel.model_id)}
{@const IconComponent = companyIcons[currentCompany]} {@const IconComponent = getModelIcon(currentModel.model_id)}
<IconComponent class="size-4" /> <IconComponent class="size-4" />
{/if} {/if}
<span class="truncate"> <span class="truncate">
@ -261,9 +261,6 @@
{#if getModelIcon(model.model_id)} {#if getModelIcon(model.model_id)}
{@const ModelIcon = getModelIcon(model.model_id)} {@const ModelIcon = getModelIcon(model.model_id)}
<ModelIcon class="size-6 shrink-0" /> <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} {/if}
<p class="font-fake-proxima mt-2 text-center leading-tight font-bold"> <p class="font-fake-proxima mt-2 text-center leading-tight font-bold">
{formatted.primary} {formatted.primary}