Polish chat UI and wire flue agent env
- Add chat components (header, composer, conversation, message, thinking response, identity) - Add chat hooks (use-chat-agent, use-chat-composer) - Add chat lib (constants, transforms, types) - Wire agent model config through env (provider, name, api, base url, key, context window, max tokens) - Refresh web styling and routes
This commit is contained in:
-Puter
@@ -1 +1,257 @@
|
||||
@import "@code/ui/globals.css";
|
||||
@import "streamdown/styles.css";
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-surface {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% -12%,
|
||||
oklch(0.72 0.045 255 / 9%),
|
||||
transparent 32rem
|
||||
),
|
||||
var(--background);
|
||||
}
|
||||
|
||||
.chat-surface::before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(
|
||||
oklch(0.5 0 0 / 9%) 0.55px,
|
||||
transparent 0.55px
|
||||
);
|
||||
background-size: 18px 18px;
|
||||
mask-image: linear-gradient(to bottom, black, transparent 42%);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
background: color-mix(in oklch, var(--background) 88%, transparent);
|
||||
backdrop-filter: blur(18px) saturate(1.25);
|
||||
}
|
||||
|
||||
.zopu-mark {
|
||||
border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
|
||||
background:
|
||||
linear-gradient(145deg, oklch(1 0 0 / 65%), transparent 55%),
|
||||
color-mix(in oklch, var(--muted) 88%, var(--background));
|
||||
color: var(--foreground);
|
||||
box-shadow:
|
||||
inset 0 1px 0 oklch(1 0 0 / 48%),
|
||||
0 6px 18px -12px oklch(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
animation: chat-message-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.response-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--muted-foreground);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.response-state-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.response-state-dots i,
|
||||
.thinking-line span {
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
animation: response-dot 1.25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.response-state-dots i {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.response-state-dots i:nth-child(2),
|
||||
.thinking-line span:nth-child(2) {
|
||||
animation-delay: 140ms;
|
||||
}
|
||||
|
||||
.response-state-dots i:nth-child(3),
|
||||
.thinking-line span:nth-child(3) {
|
||||
animation-delay: 280ms;
|
||||
}
|
||||
|
||||
.thinking-line {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
min-height: 1.75rem;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
color: color-mix(in oklch, var(--foreground) 42%, transparent);
|
||||
}
|
||||
|
||||
.thinking-line span {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.chat-markdown[data-streamdown="true"] {
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
|
||||
@keyframes response-dot {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
opacity: 0.28;
|
||||
transform: translateY(0) scale(0.84);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.composer-dock {
|
||||
position: relative;
|
||||
background: linear-gradient(to top, var(--background) 68%, transparent);
|
||||
}
|
||||
|
||||
.composer-shell {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
@keyframes chat-message-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-markdown {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.chat-markdown > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.chat-markdown > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chat-markdown p,
|
||||
.chat-markdown ul,
|
||||
.chat-markdown ol,
|
||||
.chat-markdown blockquote,
|
||||
.chat-markdown pre,
|
||||
.chat-markdown table {
|
||||
margin-block: 0.8rem;
|
||||
}
|
||||
|
||||
.chat-markdown h1,
|
||||
.chat-markdown h2,
|
||||
.chat-markdown h3,
|
||||
.chat-markdown h4 {
|
||||
margin-block: 1.4rem 0.65rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.chat-markdown h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.chat-markdown h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.chat-markdown h3,
|
||||
.chat-markdown h4 {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.chat-markdown ul,
|
||||
.chat-markdown ol {
|
||||
padding-inline-start: 1.4rem;
|
||||
}
|
||||
|
||||
.chat-markdown ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.chat-markdown ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.chat-markdown li + li {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.chat-markdown blockquote {
|
||||
border-inline-start: 2px solid var(--border);
|
||||
padding-inline-start: 1rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.chat-markdown a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--muted-foreground);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.chat-markdown :not(pre) > code {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--muted);
|
||||
padding: 0.1rem 0.35rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.chat-markdown pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--muted);
|
||||
padding: 1rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.chat-markdown table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.chat-markdown th,
|
||||
.chat-markdown td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.chat-markdown *,
|
||||
.chat-message,
|
||||
.cn-message-scroller-button,
|
||||
.response-state-dots i,
|
||||
.thinking-line span {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user