padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix tailwind colors; gradients work now!

Browse source
This commit is contained in:
padreug 2025-02-12 01:23:13 +01:00
parent e94e20db08
commit 6283c76861
8 changed files with 282 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/ui/message-bubble/MessageBubble.vue
View file

@ -19,10 +19,10 @@ const copiedValues = ref(new Set<string>())
const bubbleClasses = computed(() => {
return cn(
'relative flex flex-col break-words min-w-[120px] max-w-[90%] md:max-w-[75%] text-sm',
'relative flex flex-col break-words min-w-[120px] max-w-[90%] md:max-w-[75%] text-sm shadow-sm',
props.sent
? 'bg-gradient-to-br from-purple-300 to-purple-400 text-gray-900'
: 'bg-gradient-to-br from-gray-700 to-gray-800 text-gray-100',
? 'bg-gradient-to-br from-primary/90 via-primary/80 to-primary/70 text-primary-foreground ring-1 ring-primary/10'
: 'bg-gradient-to-br from-muted/90 via-muted/80 to-muted/70 text-muted-foreground ring-1 ring-border/10',
// First message in group
props.isFirst && (props.sent ? 'rounded-t-xl rounded-l-xl' : 'rounded-t-xl rounded-r-xl'),
// Last message in group
@ -60,7 +60,7 @@ const copyToClipboard = async (text: string) => {
const formatSpecialContent = (type: 'address' | 'txid' | 'invoice', value: string) => {
const isCopied = copiedValues.value.has(value)
const buttonClasses = 'inline-flex items-center gap-1 px-2 h-[22px] text-[11px] font-medium rounded bg-gray-800/20 hover:bg-gray-800/30 transition-colors'
const buttonClasses = 'inline-flex items-center gap-1 px-2 h-[22px] text-[11px] font-medium rounded bg-background/10 hover:bg-background/20 transition-colors ring-1 ring-border/5'
if (type === 'txid') {
return `<div class="font-mono text-[11px] leading-normal break-all opacity-90">${value}</div><div class="flex flex-wrap items-center gap-1.5 mt-1.5"><button data-copy="${value}" class="${buttonClasses}"><svg class="h-3 w-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${isCopied ? '<path d="M20 6 9 17l-5-5"/>' : '<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"/>'}</svg>Copy txid</button><a href="https://mempool.space/tx/${value}" target="_blank" rel="noopener noreferrer" class="${buttonClasses}"><svg class="h-3 w-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10M7 17 17 7"/></svg>mempool.space</a></div>`
@ -133,12 +133,15 @@ const handleClick = async (event: MouseEvent) => {
<div :class="bubbleClasses" @click="handleClick">
<div class="px-3 py-2 break-words whitespace-pre-wrap">
<span v-if="isJson" class="font-mono text-[11px]">
<pre class="select-text p-2 rounded">{{ JSON.stringify(JSON.parse(content), null, 2) }}</pre>
<pre class="select-text p-2 rounded bg-background/10">{{ JSON.stringify(JSON.parse(content), null, 2) }}</pre>
</span>
<span v-else class="select-text text-[13px] leading-relaxed" v-html="formattedContent"></span>
</div>
<span v-if="showTimestamp && isLast" class="text-[10px] text-gray-500/80 px-3 pb-1 select-none"
:class="{ 'self-end': sent }">{{ formatTime(timestamp) }}</span>
<span v-if="showTimestamp && isLast"
class="text-[10px] px-3 pb-1 select-none opacity-70"
:class="{ 'self-end': sent }">
{{ formatTime(timestamp) }}
</span>
</div>
</template>
@ -164,7 +167,6 @@ const handleClick = async (event: MouseEvent) => {
}
:deep(pre) {
background: rgba(0, 0, 0, 0.1);
margin: 0;
font-size: 11px;
line-height: 1.4;
@ -181,11 +183,6 @@ const handleClick = async (event: MouseEvent) => {
outline-offset: 2px;
}
/* Dark theme adjustments for JSON */
:deep(pre) {
background: rgba(0, 0, 0, 0.2);
}
/* Special content container styles */
:deep(.special-content) {
margin: 0.5rem 0;