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

fix copy

Browse source
This commit is contained in:
Thomas G. Lopes 2025-06-18 19:48:39 +01:00
parent aefd2f4a35
commit c582f32aca
4 changed files with 85 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/app.css
View file

@ -495,7 +495,7 @@ pre button.copy {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@apply bg-background/80 hover:bg-background border-border hover:border-border/60 rounded-md border shadow-sm hover:shadow-md; /* Text color removed from here */
@apply bg-background/80 hover:bg-background border-border hover:border-border/60 hover:text-foreground rounded-md border shadow-sm hover:shadow-md;
/* Improved hover and focus states */
&:hover {
@ -519,12 +519,14 @@ pre button.copy {
background-position: center;
background-size: contain;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
/* Default filter for light mode (assuming black/dark SVGs) */
filter: brightness(0.2) sepia(1) saturate(5) hue-rotate(240deg); /* Adjust hue-rotate to match your muted-foreground */
background-color: transparent !important;
}
& svg {
width: 16px;
height: 16px;
}
& .ready {
background-color: transparent;
background-image: url(/icons/copy.svg);
}
@ -535,12 +537,8 @@ pre button.copy {
}
&.copied {
/* Light mode success state colors */
@apply bg-primary/10 border-primary/30;
/* Filter for success icon in light mode (e.g., primary color) */
& span {
filter: brightness(0.5) sepia(1) saturate(5) hue-rotate(240deg); /* Adjust to primary color */
}
/* Light mode success state (dark blue text on light background) */
@apply bg-primary/10 border-primary/30 text-primary;
& .success {
display: block;
@ -553,21 +551,11 @@ pre button.copy {
}
}
/* Dark mode adjustments for copy button */
.dark pre button.copy {
& span {
/* Filter for dark mode (turn icons white/light) */
filter: invert(1) brightness(1.2); /* Invert and brighten for white/light icons */
}
&.copied {
/* Dark mode success state colors */
@apply bg-primary/20 border-primary/40;
/* Filter for success icon in dark mode (e.g., primary-foreground color) */
& span {
filter: invert(1) brightness(1.2); /* Keep them white/light for dark mode success */
}
}
/* Dark mode adjustments for copy button success state */
.dark pre button.copy.copied {
/* Dark mode success state (light blue text on dark background) */
@apply bg-primary/20 border-primary/40 text-primary-foreground;
/* Using primary-foreground which is white/light for better visibility */
}
/* Copy success animation */

46
src/lib/utils/markdown-it.ts
View file

@ -19,6 +19,41 @@ md.use(
{
name: 'shiki-transformer-copy-button',
pre(node) {
const copyIcon = h(
'svg',
{
width: '24',
height: '24',
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
},
[
h('rect', { width: '14', height: '14', x: '8', y: '8', rx: '2', ry: '2' }),
h('path', {
d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2',
}),
]
);
const checkIcon = h(
'svg',
{
width: '24',
height: '24',
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
},
[h('path', { d: 'M20 6 9 17l-5-5' })]
);
const button = h(
'button',
{
@ -30,7 +65,16 @@ md.use(
setTimeout(() => this.classList.remove('copied'), ${3000})
`,
},
[h('span', { class: 'ready' }), h('span', { class: 'success' })]
[
h('span', { class: 'ready', style: 'background-color: transparent !important;' }, [
copyIcon,
]),
h(
'span',
{ class: 'success', style: 'background-color: transparent !important;' },
[checkIcon]
),
]
);
node.children.push(button);

14
static/icons/copy-success.svg
View file

@ -1,2 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5" /></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 262 B

After

Width:  |  Height:  |  Size: 273 B

16
static/icons/copy.svg
View file

@ -1 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-copy-icon lucide-copy"
><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
/></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 355 B

After

Width:  |  Height:  |  Size: 373 B