fix tailwind colors; gradients work now!
This commit is contained in:
parent
e94e20db08
commit
6283c76861
8 changed files with 282 additions and 145 deletions
|
|
@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
|
|||
*/
|
||||
workbox.precacheAndRoute([{
|
||||
"url": "index.html",
|
||||
"revision": "0.fnrrna5najg"
|
||||
"revision": "0.d4m96v8cgs"
|
||||
}], {});
|
||||
workbox.cleanupOutdatedCaches();
|
||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
|
||||
|
|
|
|||
96
package-lock.json
generated
96
package-lock.json
generated
|
|
@ -24,6 +24,8 @@
|
|||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.0.1",
|
||||
"@types/node": "^22.12.0",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
|
|
@ -2612,6 +2614,19 @@
|
|||
"tslib": "^2.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/forms": {
|
||||
"version": "0.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
|
||||
"integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.1.tgz",
|
||||
|
|
@ -2834,6 +2849,22 @@
|
|||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.16",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
|
||||
"integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lodash.castarray": "^4.4.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"lodash.merge": "^4.6.2",
|
||||
"postcss-selector-parser": "6.0.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/vite": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.0.1.tgz",
|
||||
|
|
@ -3602,6 +3633,19 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"cssesc": "bin/cssesc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
|
|
@ -5271,6 +5315,13 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.castarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
|
||||
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
|
|
@ -5278,6 +5329,20 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.isplainobject": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.sortby": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
|
||||
|
|
@ -5323,6 +5388,16 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"mini-svg-data-uri": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "9.0.5",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
|
||||
|
|
@ -5585,6 +5660,20 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.10",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
|
||||
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-bytes": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
|
||||
|
|
@ -6680,6 +6769,13 @@
|
|||
"browserslist": ">= 4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.0.11",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@
|
|||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.0.1",
|
||||
"@types/node": "^22.12.0",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
|
@ -70,108 +71,108 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bg-background {
|
||||
background-color: hsl(var(--background));
|
||||
background-color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
.bg-foreground {
|
||||
background-color: hsl(var(--foreground));
|
||||
background-color: hsl(var(--foreground) / <alpha-value>);
|
||||
}
|
||||
.bg-card {
|
||||
background-color: hsl(var(--card));
|
||||
background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-card-foreground {
|
||||
background-color: hsl(var(--card-foreground));
|
||||
background-color: hsl(var(--card-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-popover {
|
||||
background-color: hsl(var(--popover));
|
||||
background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-popover-foreground {
|
||||
background-color: hsl(var(--popover-foreground));
|
||||
background-color: hsl(var(--popover-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: hsl(var(--primary));
|
||||
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-primary-foreground {
|
||||
background-color: hsl(var(--primary-foreground));
|
||||
background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: hsl(var(--secondary));
|
||||
background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-secondary-foreground {
|
||||
background-color: hsl(var(--secondary-foreground));
|
||||
background-color: hsl(var(--secondary-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-muted {
|
||||
background-color: hsl(var(--muted));
|
||||
background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-muted-foreground {
|
||||
background-color: hsl(var(--muted-foreground));
|
||||
background-color: hsl(var(--muted-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: hsl(var(--accent));
|
||||
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-accent-foreground {
|
||||
background-color: hsl(var(--accent-foreground));
|
||||
background-color: hsl(var(--accent-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-destructive {
|
||||
background-color: hsl(var(--destructive));
|
||||
background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-destructive-foreground {
|
||||
background-color: hsl(var(--destructive-foreground));
|
||||
background-color: hsl(var(--destructive-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.text-background {
|
||||
color: hsl(var(--background));
|
||||
color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
.text-foreground {
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--foreground) / <alpha-value>);
|
||||
}
|
||||
.text-card {
|
||||
color: hsl(var(--card));
|
||||
color: hsl(var(--card) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-card-foreground {
|
||||
color: hsl(var(--card-foreground));
|
||||
color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-popover {
|
||||
color: hsl(var(--popover));
|
||||
color: hsl(var(--popover) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-popover-foreground {
|
||||
color: hsl(var(--popover-foreground));
|
||||
color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-primary {
|
||||
color: hsl(var(--primary));
|
||||
color: hsl(var(--primary) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-primary-foreground {
|
||||
color: hsl(var(--primary-foreground));
|
||||
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
color: hsl(var(--secondary) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-secondary-foreground {
|
||||
color: hsl(var(--secondary-foreground));
|
||||
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-muted {
|
||||
color: hsl(var(--muted));
|
||||
color: hsl(var(--muted) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-muted-foreground {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-accent {
|
||||
color: hsl(var(--accent));
|
||||
color: hsl(var(--accent) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-accent-foreground {
|
||||
color: hsl(var(--accent-foreground));
|
||||
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-destructive {
|
||||
color: hsl(var(--destructive));
|
||||
color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-destructive-foreground {
|
||||
color: hsl(var(--destructive-foreground));
|
||||
color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
|
|
@ -180,3 +181,29 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Add support for ring colors */
|
||||
@layer utilities {
|
||||
.ring-border {
|
||||
--tw-ring-color: hsl(var(--border) / <alpha-value>);
|
||||
}
|
||||
.ring-primary {
|
||||
--tw-ring-color: hsl(var(--primary) / <alpha-value>);
|
||||
}
|
||||
.ring-background {
|
||||
--tw-ring-color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add support for border colors */
|
||||
@layer utilities {
|
||||
.box-border {
|
||||
border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.border-primary {
|
||||
border-color: hsl(var(--primary) / <alpha-value>);
|
||||
}
|
||||
.border-background {
|
||||
border-color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -126,25 +126,25 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
|
||||
<template>
|
||||
<Card
|
||||
class="flex flex-col h-full bg-gradient-to-b from-[#1e1e2e] to-[#181825] border-[#313244] shadow-2xl overflow-hidden relative z-0">
|
||||
class="flex flex-col h-full bg-gradient-to-b from-card to-background border-border shadow-2xl overflow-hidden relative z-0">
|
||||
<CardHeader
|
||||
class="flex-shrink-0 flex flex-row items-center justify-between px-6 py-4 border-b border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md relative z-50">
|
||||
class="flex-shrink-0 flex flex-row items-center justify-between px-6 py-4 border-b border-border/50 bg-background/95 backdrop-blur-md relative z-50">
|
||||
<!-- Left side with avatar and name -->
|
||||
<div class="flex items-center gap-5 flex-shrink-0">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute -inset-0.5 bg-gradient-to-r from-[#cba6f7] to-[#89b4fa] rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200">
|
||||
class="absolute -inset-0.5 bg-gradient-to-r from-primary to-primary/50 rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200">
|
||||
</div>
|
||||
<Avatar
|
||||
class="relative h-11 w-11 bg-[#313244] ring-2 ring-[#cba6f7] ring-offset-2 ring-offset-[#181825] shadow-md transition-all duration-200 hover:shadow-lg group-hover:scale-105">
|
||||
<AvatarFallback class="text-base font-semibold text-[#cdd6f4]">SA</AvatarFallback>
|
||||
class="relative h-11 w-11 bg-muted ring-2 ring-ring ring-offset-2 ring-offset-background shadow-md transition-all duration-200 hover:shadow-lg group-hover:scale-105">
|
||||
<AvatarFallback class="text-base font-semibold text-foreground">SA</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="font-semibold leading-none text-[#cdd6f4] tracking-tight">Support Agent</p>
|
||||
<p class="font-semibold leading-none text-foreground tracking-tight">Support Agent</p>
|
||||
<div class="flex items-center gap-1.5 mt-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-[#a6e3a1] animate-pulse"></div>
|
||||
<p class="text-sm text-[#a6adc8]">Online</p>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
|
||||
<p class="text-sm text-muted-foreground">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,7 +152,7 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
<!-- Center badge -->
|
||||
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
class="text-xs font-medium text-[#cdd6f4] bg-gradient-to-r from-[#313244]/80 to-[#45475a]/80 backdrop-blur-sm px-4 py-2 rounded-full whitespace-nowrap shadow-lg border border-[#45475a]/50">
|
||||
class="text-xs font-medium text-foreground bg-gradient-to-r from-muted/80 to-muted/50 backdrop-blur-sm px-4 py-2 rounded-full whitespace-nowrap shadow-lg border border-border/50">
|
||||
Customer Support
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,7 +167,7 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-[#1e1e2e] to-[#181825] overflow-hidden">
|
||||
<CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-card to-background overflow-hidden">
|
||||
<ScrollArea class="h-full" type="hover">
|
||||
<div class="flex flex-col gap-4 px-6 py-4">
|
||||
<template v-for="(group, groupIndex) in groupedMessages" :key="groupIndex">
|
||||
|
|
@ -176,7 +176,7 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
formatDate(group.timestamp) !== formatDate(groupedMessages[groupIndex - 1].timestamp)"
|
||||
class="flex justify-center my-8">
|
||||
<div
|
||||
class="px-4 py-1.5 rounded-full bg-gradient-to-r from-[#313244]/30 to-[#45475a]/30 text-xs font-medium text-[#a6adc8] shadow-lg backdrop-blur-sm border border-[#45475a]/20">
|
||||
class="px-4 py-1.5 rounded-full bg-gradient-to-r from-muted/30 to-muted/30 text-xs font-medium text-muted-foreground shadow-lg backdrop-blur-sm border border-border/20">
|
||||
{{ formatDate(group.timestamp) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,15 +203,15 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
</CardContent>
|
||||
|
||||
<CardFooter
|
||||
class="flex-shrink-0 border-t border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md p-4 shadow-xl">
|
||||
class="flex-shrink-0 border-t border-border/50 bg-background/95 backdrop-blur-md p-4 shadow-xl">
|
||||
<form @submit="sendMessage" class="flex w-full items-center gap-4">
|
||||
<Input id="message" v-model="input" placeholder="Type your message..."
|
||||
class="flex-1 bg-[#1e1e2e]/90 border-[#313244] text-[#cdd6f4] placeholder:text-[#6c7086] focus:ring-2 focus:ring-[#cba6f7] focus:border-[#cba6f7] transition-all duration-300 shadow-lg hover:border-[#45475a] rounded-xl h-11"
|
||||
class="flex-1 bg-card/90 border-border text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-300 shadow-lg hover:border-border/60 rounded-xl h-11"
|
||||
autocomplete="off" />
|
||||
<Button type="submit" size="icon" :disabled="inputLength === 0 || isSending"
|
||||
class="bg-gradient-to-r from-[#cba6f7] to-[#89b4fa] text-[#11111b] hover:brightness-110 active:brightness-90 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:hover:shadow-lg h-11 w-11 rounded-xl flex-shrink-0">
|
||||
class="bg-gradient-to-r from-primary to-primary/80 text-primary-foreground hover:brightness-110 active:brightness-90 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:hover:shadow-lg h-11 w-11 rounded-xl flex-shrink-0">
|
||||
<Send v-if="!isSending" class="h-4 w-4" />
|
||||
<div v-else class="h-4 w-4 animate-spin rounded-full border-2 border-[#11111b] border-r-transparent" />
|
||||
<div v-else class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-r-transparent" />
|
||||
<span class="sr-only">{{ isSending ? 'Sending...' : 'Send' }}</span>
|
||||
</Button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
97
tailwind.config.js
Normal file
97
tailwind.config.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
const animate = require("tailwindcss-animate")
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
safelist: ["dark"],
|
||||
prefix: "",
|
||||
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx,vue}',
|
||||
'./components/**/*.{ts,tsx,vue}',
|
||||
'./app/**/*.{ts,tsx,vue}',
|
||||
'./src/**/*.{ts,tsx,vue}',
|
||||
'./index.html',
|
||||
],
|
||||
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border) / <alpha-value>)',
|
||||
input: 'hsl(var(--input) / <alpha-value>)',
|
||||
ring: 'hsl(var(--ring) / <alpha-value>)',
|
||||
background: 'hsl(var(--background) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--foreground) / <alpha-value>)',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
animate,
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
future: {
|
||||
hoverOnlyWhenSupported: true,
|
||||
respectDefaultRingColorOpacity: true,
|
||||
disableColorOpacityUtilitiesByDefault: true,
|
||||
colorOpacityUtilities: true,
|
||||
},
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
const animate = require("tailwindcss-animate")
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
safelist: ["dark"],
|
||||
prefix: "",
|
||||
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx,vue}',
|
||||
'./components/**/*.{ts,tsx,vue}',
|
||||
'./app/**/*.{ts,tsx,vue}',
|
||||
'./src/**/*.{ts,tsx,vue}',
|
||||
],
|
||||
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [animate],
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue