feat(UI): Introduce new UI components for file attachments and related views (#191)
Add file management API and UI components Implement directory listing, search and CRUD operations in desktop backend Expose new Files API on frontend to list, search, and modify files
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
1f23b63c0b
commit
d97181bcd2
+20
-943
@@ -1,33 +1,10 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "./styles/design-system.css";
|
||||
@import "./styles/typography.css";
|
||||
@import "./styles/mobile.css";
|
||||
@source "./**/*.{ts,tsx,css}";
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--oc-safe-area-top: 0px;
|
||||
--oc-safe-area-right: 0px;
|
||||
--oc-safe-area-bottom: 0px;
|
||||
--oc-safe-area-bottom-visual: 0px;
|
||||
--oc-safe-area-left: 0px;
|
||||
--oc-header-height: 56px;
|
||||
--oc-visual-viewport-offset-top: 0px;
|
||||
--oc-keyboard-inset: 0px;
|
||||
--oc-keyboard-avoid-offset: 0px;
|
||||
--oc-keyboard-home-indicator: 0px;
|
||||
--ui-regular-font-weight: 400;
|
||||
--oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
|
||||
--oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
|
||||
--padding-scale: 1;
|
||||
|
||||
/* Semantic typography defaults (must match SEMANTIC_TYPOGRAPHY) */
|
||||
--text-markdown: 0.9375rem;
|
||||
--text-code: 0.9063rem;
|
||||
--text-ui-header: 0.9375rem;
|
||||
--text-ui-label: 0.8750rem;
|
||||
--text-meta: 0.875rem;
|
||||
--text-micro: 0.875rem;
|
||||
}
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Suppress WebKit-specific hover/focus adornments on the chat textarea */
|
||||
@@ -240,399 +217,8 @@ svg.animate-spin {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Semantic Typography System Classes */
|
||||
@layer components {
|
||||
/* Semantic typography classes - font-size only */
|
||||
.typography-markdown {
|
||||
font-size: var(--text-markdown);
|
||||
}
|
||||
|
||||
.typography-code {
|
||||
font-size: var(--text-code);
|
||||
}
|
||||
|
||||
.typography-ui-header {
|
||||
font-size: var(--text-ui-header);
|
||||
}
|
||||
|
||||
.typography-ui-label {
|
||||
font-size: var(--text-ui-label);
|
||||
}
|
||||
|
||||
.typography-meta {
|
||||
font-size: var(--text-meta);
|
||||
}
|
||||
|
||||
.typography-micro {
|
||||
font-size: var(--text-micro);
|
||||
}
|
||||
|
||||
.chat-column {
|
||||
width: min(100%, 56rem);
|
||||
margin-inline: auto;
|
||||
padding-inline: calc(clamp(1rem, 3vw, 1.5rem) * var(--padding-scale, 1));
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.chat-column {
|
||||
padding-inline: calc(clamp(1.25rem, 2.5vw, 2rem) * var(--padding-scale, 1));
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced focus indicators for small interactive elements */
|
||||
.model-favorite-button {
|
||||
position: relative;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.model-favorite-button:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.model-favorite-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* FadeInOnReveal handles all animations - no custom CSS needed */
|
||||
|
||||
/* Heading typography - all use markdown size, differentiated by weight/color */
|
||||
|
||||
.typography-h1 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--h1-line-height);
|
||||
letter-spacing: var(--h1-letter-spacing);
|
||||
font-weight: var(--h1-font-weight);
|
||||
}
|
||||
|
||||
.typography-h2 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--h2-line-height);
|
||||
letter-spacing: var(--h2-letter-spacing);
|
||||
font-weight: var(--h2-font-weight);
|
||||
}
|
||||
|
||||
.typography-h3 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--h3-line-height);
|
||||
letter-spacing: var(--h3-letter-spacing);
|
||||
font-weight: var(--h3-font-weight);
|
||||
}
|
||||
|
||||
/* UI element typography - mapped to semantic variables */
|
||||
.typography-ui-button {
|
||||
font-size: var(--text-ui-label);
|
||||
line-height: var(--ui-button-line-height);
|
||||
letter-spacing: var(--ui-button-letter-spacing);
|
||||
font-weight: var(--ui-button-font-weight);
|
||||
}
|
||||
|
||||
.typography-ui-caption {
|
||||
font-size: var(--text-micro);
|
||||
line-height: var(--ui-caption-line-height);
|
||||
letter-spacing: var(--ui-caption-letter-spacing);
|
||||
font-weight: var(--ui-caption-font-weight);
|
||||
}
|
||||
|
||||
/* Markdown typography - all use semantic markdown size */
|
||||
.typography-markdown-body {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--markdown-body-line-height);
|
||||
letter-spacing: var(--markdown-body-letter-spacing);
|
||||
font-weight: var(--markdown-body-font-weight);
|
||||
}
|
||||
|
||||
.typography-markdown-h1 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--markdown-h1-line-height);
|
||||
letter-spacing: var(--markdown-h1-letter-spacing);
|
||||
font-weight: var(--markdown-h1-font-weight);
|
||||
}
|
||||
|
||||
.typography-markdown-h2 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--markdown-h2-line-height);
|
||||
letter-spacing: var(--markdown-h2-letter-spacing);
|
||||
font-weight: var(--markdown-h2-font-weight);
|
||||
}
|
||||
|
||||
.typography-markdown-h3 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--markdown-h3-line-height);
|
||||
letter-spacing: var(--markdown-h3-letter-spacing);
|
||||
font-weight: var(--markdown-h3-font-weight);
|
||||
}
|
||||
|
||||
.typography-markdown-h4 {
|
||||
font-size: var(--text-markdown);
|
||||
line-height: var(--markdown-h4-line-height);
|
||||
letter-spacing: var(--markdown-h4-letter-spacing);
|
||||
font-weight: var(--markdown-h4-font-weight);
|
||||
}
|
||||
|
||||
.animate-spin-once {
|
||||
animation: spin-once 0.5s linear forwards;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Default Light Theme */
|
||||
--background: oklch(0.97 0.02 85); /* Warm sand background */
|
||||
--foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--card: oklch(0.99 0.01 90); /* Bright sand card */
|
||||
--card-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--popover: oklch(0.99 0.01 90); /* Bright sand popover */
|
||||
--popover-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--primary: oklch(0.65 0.2 55); /* Primary accent - orange */
|
||||
--primary-foreground: oklch(0.99 0.01 90); /* Light text on primary */
|
||||
--secondary: oklch(0.92 0.02 80); /* Light sand */
|
||||
--secondary-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--muted: oklch(0.9 0.015 75); /* Muted sand */
|
||||
--muted-foreground: oklch(0.45 0.02 50); /* Medium warm text */
|
||||
--accent: oklch(0.92 0.02 80); /* Light sand accent */
|
||||
--accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--destructive: oklch(0.55 0.25 25); /* Warm red */
|
||||
--destructive-foreground: oklch(0.99 0.01 90); /* Light text */
|
||||
--border: oklch(0.85 0.02 70); /* Warm border */
|
||||
--input: oklch(0.88 0.02 75); /* Input background */
|
||||
--ring: oklch(0.65 0.2 55); /* Focus ring color */
|
||||
--radius: 0.625rem;
|
||||
--chart-1: oklch(0.58 0.15 230); /* Blue */
|
||||
--chart-2: oklch(0.58 0.15 145); /* Oasis green */
|
||||
--chart-3: oklch(0.65 0.2 55); /* Orange */
|
||||
--chart-4: oklch(0.55 0.18 30); /* Rose */
|
||||
--chart-5: oklch(0.6 0.16 85); /* Golden sand */
|
||||
--sidebar: oklch(0.95 0.02 80); /* Slightly darker sand */
|
||||
--sidebar-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--sidebar-primary: oklch(0.65 0.2 55); /* Primary accent */
|
||||
--sidebar-primary-foreground: oklch(0.99 0.01 90); /* Light text */
|
||||
--sidebar-accent: oklch(0.9 0.02 75); /* Light sand accent */
|
||||
--sidebar-accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--sidebar-border: oklch(0.85 0.02 70); /* Warm border */
|
||||
--sidebar-ring: oklch(0.65 0.2 55); /* Focus ring */
|
||||
--sidebar-stuck-bg: #DDDDD3; /* Desktop sidebar sticky header background */
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Default Dark Theme - using OKLCH color space */
|
||||
--background: oklch(0.16 0.01 30); /* #151313 */
|
||||
--foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--card: oklch(0.19 0.01 40); /* #1C1B1A */
|
||||
--card-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--popover: oklch(0.24 0.01 40); /* #282726 */
|
||||
--popover-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--primary: oklch(0.77 0.17 85); /* #edb449 - golden sand */
|
||||
--primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||||
--secondary: oklch(0.29 0.01 40); /* #343331 */
|
||||
--secondary-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--muted: oklch(0.33 0.01 40); /* #403E3C */
|
||||
--muted-foreground: oklch(0.75 0.02 80); /* #b6b4ab */
|
||||
--accent: oklch(0.29 0.01 40); /* #343331 */
|
||||
--accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--destructive: oklch(0.65 0.15 30); /* #d98678 */
|
||||
--destructive-foreground: oklch(0.9 0.02 80); /* #e1dcd0 */
|
||||
--border: oklch(0.31 0.01 35); /* #393836 */
|
||||
--input: oklch(0.33 0.01 40); /* #403E3C */
|
||||
--ring: oklch(0.77 0.17 85); /* #edb449 */
|
||||
--chart-1: oklch(0.68 0.12 230); /* #5aa9d9 - blue */
|
||||
--chart-2: oklch(0.68 0.12 145); /* #81af6c - green */
|
||||
--chart-3: oklch(0.7 0.13 95); /* #c2974d - yellow */
|
||||
--chart-4: oklch(0.65 0.14 45); /* #d8886d - coral */
|
||||
--chart-5: oklch(0.68 0.12 55); /* #d29470 - orange */
|
||||
--sidebar: oklch(0.16 0.01 30); /* #151313 */
|
||||
--sidebar-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--sidebar-primary: oklch(0.77 0.17 85); /* #edb449 */
|
||||
--sidebar-primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||||
--sidebar-accent: oklch(0.24 0.01 40); /* #282726 */
|
||||
--sidebar-accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--sidebar-border: oklch(0.31 0.01 35); /* #393836 */
|
||||
--sidebar-ring: oklch(0.77 0.17 85); /* #edb449 */
|
||||
--sidebar-stuck-bg: #1F1F1D; /* Desktop sidebar sticky header background */
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
:root * {
|
||||
border-color: rgba(194, 151, 77, 0.2); /* Warm golden sand borders for light mode */
|
||||
}
|
||||
|
||||
.dark * {
|
||||
border-color: rgba(57, 56, 54, 0.5); /* #393836 at 50% opacity */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
/* Override Tailwind spacing scale with custom properties that respect --padding-scale */
|
||||
--spacing-0: 0;
|
||||
--spacing-0\.5: calc(0.125rem * var(--padding-scale, 1));
|
||||
--spacing-1: calc(0.25rem * var(--padding-scale, 1));
|
||||
--spacing-1\.5: calc(0.375rem * var(--padding-scale, 1));
|
||||
--spacing-2: calc(0.5rem * var(--padding-scale, 1));
|
||||
--spacing-2\.5: calc(0.625rem * var(--padding-scale, 1));
|
||||
--spacing-3: calc(0.75rem * var(--padding-scale, 1));
|
||||
--spacing-3\.5: calc(0.875rem * var(--padding-scale, 1));
|
||||
--spacing-4: calc(1rem * var(--padding-scale, 1));
|
||||
--spacing-5: calc(1.25rem * var(--padding-scale, 1));
|
||||
--spacing-6: calc(1.5rem * var(--padding-scale, 1));
|
||||
--spacing-7: calc(1.75rem * var(--padding-scale, 1));
|
||||
--spacing-8: calc(2rem * var(--padding-scale, 1));
|
||||
--spacing-9: calc(2.25rem * var(--padding-scale, 1));
|
||||
--spacing-10: calc(2.5rem * var(--padding-scale, 1));
|
||||
--spacing-11: calc(2.75rem * var(--padding-scale, 1));
|
||||
--spacing-12: calc(3rem * var(--padding-scale, 1));
|
||||
--spacing-14: calc(3.5rem * var(--padding-scale, 1));
|
||||
--spacing-16: calc(4rem * var(--padding-scale, 1));
|
||||
--spacing-20: calc(5rem * var(--padding-scale, 1));
|
||||
--spacing-24: calc(6rem * var(--padding-scale, 1));
|
||||
--spacing-28: calc(7rem * var(--padding-scale, 1));
|
||||
--spacing-32: calc(8rem * var(--padding-scale, 1));
|
||||
--spacing-36: calc(9rem * var(--padding-scale, 1));
|
||||
--spacing-40: calc(10rem * var(--padding-scale, 1));
|
||||
--spacing-44: calc(11rem * var(--padding-scale, 1));
|
||||
--spacing-48: calc(12rem * var(--padding-scale, 1));
|
||||
--spacing-52: calc(13rem * var(--padding-scale, 1));
|
||||
--spacing-56: calc(14rem * var(--padding-scale, 1));
|
||||
--spacing-60: calc(15rem * var(--padding-scale, 1));
|
||||
--spacing-64: calc(16rem * var(--padding-scale, 1));
|
||||
--spacing-72: calc(18rem * var(--padding-scale, 1));
|
||||
--spacing-80: calc(20rem * var(--padding-scale, 1));
|
||||
--spacing-96: calc(24rem * var(--padding-scale, 1));
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-status-success: var(--status-success);
|
||||
--color-status-warning: var(--status-warning);
|
||||
--color-status-error: var(--status-error);
|
||||
--color-status-info: var(--status-info);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
/* Markdown typography variables */
|
||||
--markdown-body-font-size: var(--text-markdown);
|
||||
--markdown-body-line-height: var(--markdown-body-line-height);
|
||||
--markdown-h1-font-size: var(--text-markdown);
|
||||
--markdown-h1-line-height: var(--markdown-h1-line-height);
|
||||
--markdown-h2-font-size: var(--text-markdown);
|
||||
--markdown-h2-line-height: var(--markdown-h2-line-height);
|
||||
--markdown-h3-font-size: var(--text-markdown);
|
||||
--markdown-h3-line-height: var(--markdown-h3-line-height);
|
||||
--markdown-h4-font-size: var(--text-markdown);
|
||||
--markdown-h4-line-height: var(--markdown-h4-line-height);
|
||||
--markdown-h5-font-size: var(--text-markdown);
|
||||
--markdown-h5-line-height: var(--markdown-h5-line-height);
|
||||
--markdown-h6-font-size: var(--text-markdown);
|
||||
--markdown-h6-line-height: var(--markdown-h6-line-height);
|
||||
--markdown-list-font-size: var(--text-markdown);
|
||||
--markdown-list-line-height: var(--markdown-list-line-height);
|
||||
--markdown-code-block-font-size: var(--text-code);
|
||||
--markdown-code-block-line-height: var(--markdown-code-block-line-height);
|
||||
|
||||
/* Markdown color variables */
|
||||
--markdown-heading1: var(--markdown-heading1);
|
||||
--markdown-heading2: var(--markdown-heading2);
|
||||
--markdown-heading3: var(--markdown-heading3);
|
||||
--markdown-heading4: var(--markdown-heading4);
|
||||
--markdown-link: var(--markdown-link);
|
||||
--markdown-link-hover: var(--markdown-link-hover);
|
||||
--markdown-list-marker: var(--markdown-list-marker);
|
||||
--markdown-inline-code: var(--markdown-inline-code);
|
||||
--markdown-inline-code-bg: var(--markdown-inline-code-bg);
|
||||
--markdown-blockquote: var(--markdown-blockquote);
|
||||
--markdown-blockquote-border: var(--markdown-blockquote-border);
|
||||
|
||||
/* Markdown spacing defaults */
|
||||
--markdown-paragraph-spacing: 0.35rem;
|
||||
--markdown-heading-primary-top: 0.75rem;
|
||||
--markdown-heading-primary-bottom: 0.35rem;
|
||||
--markdown-heading-secondary-top: 0.6rem;
|
||||
--markdown-heading-secondary-bottom: 0.3rem;
|
||||
--markdown-blockquote-spacing: 0.6rem;
|
||||
--markdown-blockquote-padding: 0.75rem;
|
||||
--markdown-divider-spacing: 0.85rem;
|
||||
--markdown-table-spacing: 0.9rem;
|
||||
--markdown-heading1-size: var(--text-markdown);
|
||||
--markdown-heading2-size: var(--text-markdown);
|
||||
--markdown-heading3-size: var(--text-markdown);
|
||||
--markdown-heading4-size: var(--text-markdown);
|
||||
--markdown-heading5-size: var(--text-markdown);
|
||||
--markdown-heading6-size: var(--text-markdown);
|
||||
--font-sans: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
|
||||
--font-heading: var(--font-sans);
|
||||
--font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
|
||||
--font-family-sans: var(--font-sans);
|
||||
--font-family-mono: var(--font-mono);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-none;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
|
||||
font-weight: var(--ui-regular-font-weight, 400);
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
|
||||
}
|
||||
|
||||
.font-mono,
|
||||
code,
|
||||
pre {
|
||||
font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
|
||||
}
|
||||
|
||||
/* Remove focus rings globally */
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.animate-spin-once {
|
||||
animation: spin-once 0.5s linear forwards;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styles */
|
||||
@@ -843,82 +429,6 @@ html:not(.dark) .chat-scroll {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Agent color system using theme variables */
|
||||
@layer components {
|
||||
/* Agent color variants - each maps to theme colors */
|
||||
.agent-primary {
|
||||
--agent-color: var(--primary);
|
||||
--agent-color-bg: var(--primary);
|
||||
}
|
||||
|
||||
.agent-info {
|
||||
--agent-color: var(--status-info);
|
||||
--agent-color-bg: var(--status-info);
|
||||
}
|
||||
|
||||
.agent-keyword {
|
||||
--agent-color: var(--syntax-keyword);
|
||||
--agent-color-bg: var(--syntax-keyword);
|
||||
}
|
||||
|
||||
.agent-success {
|
||||
--agent-color: var(--status-success);
|
||||
--agent-color-bg: var(--status-success);
|
||||
}
|
||||
|
||||
.agent-function {
|
||||
--agent-color: var(--syntax-function);
|
||||
--agent-color-bg: var(--syntax-function);
|
||||
}
|
||||
|
||||
.agent-number {
|
||||
--agent-color: var(--syntax-number);
|
||||
--agent-color-bg: var(--syntax-number);
|
||||
}
|
||||
|
||||
.agent-type {
|
||||
--agent-color: var(--syntax-type);
|
||||
--agent-color-bg: var(--syntax-type);
|
||||
}
|
||||
|
||||
.agent-warning {
|
||||
--agent-color: var(--status-warning);
|
||||
--agent-color-bg: var(--status-warning);
|
||||
}
|
||||
|
||||
.agent-variable {
|
||||
--agent-color: var(--syntax-variable);
|
||||
--agent-color-bg: var(--syntax-variable);
|
||||
}
|
||||
|
||||
/* Apply colors with opacity for badges */
|
||||
.agent-badge {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||||
border: 1px solid rgb(from var(--agent-color) r g b / 0.2);
|
||||
color: var(--agent-color);
|
||||
}
|
||||
|
||||
.agent-badge:hover {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.15);
|
||||
border-color: rgb(from var(--agent-color) r g b / 0.3);
|
||||
}
|
||||
|
||||
/* Agent dot indicator */
|
||||
.agent-dot {
|
||||
background: var(--agent-color);
|
||||
}
|
||||
|
||||
/* Agent list item */
|
||||
.agent-list-item:hover {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.05);
|
||||
}
|
||||
|
||||
.agent-list-item.active {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||||
border-color: rgb(from var(--agent-color) r g b / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header tab responsiveness */
|
||||
:root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
|
||||
display: inline;
|
||||
@@ -930,454 +440,6 @@ html:not(.dark) .chat-scroll {
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Adaptations - All Devices */
|
||||
|
||||
/* Set global device type variables */
|
||||
:root {
|
||||
--is-mobile: 0;
|
||||
--device-type: 'desktop';
|
||||
--font-scale: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root.mobile-pointer:not(.desktop-runtime) {
|
||||
--is-mobile: 1;
|
||||
--device-type: 'mobile';
|
||||
--font-scale: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes for device-specific styling */
|
||||
.desktop-only {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root.mobile-pointer:not(.desktop-runtime) .desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root.desktop-runtime .mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root.mobile-pointer:not(.desktop-runtime) .mobile-only {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* General mobile improvements for all mobile devices */
|
||||
@media (max-width: 1024px) {
|
||||
/* Override CSS custom properties for mobile */
|
||||
:root.mobile-pointer:not(.desktop-runtime) {
|
||||
--text-markdown: 1rem;
|
||||
--text-code: 0.875rem;
|
||||
--text-ui-header: 0.9375rem;
|
||||
--text-ui-label: 0.875rem;
|
||||
--text-meta: 0.875rem;
|
||||
--text-micro: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Force override with higher specificity */
|
||||
:root.mobile-pointer:not(.desktop-runtime) * {
|
||||
--text-markdown: 1rem !important;
|
||||
--text-code: 0.875rem !important;
|
||||
--text-ui-header: 0.9375rem !important;
|
||||
--text-ui-label: 0.875rem !important;
|
||||
--text-meta: 0.875rem !important;
|
||||
--text-micro: 0.8125rem !important;
|
||||
}
|
||||
|
||||
/* Additional override for elements using typography classes */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .typography-markdown,
|
||||
:root.mobile-pointer:not(.desktop-runtime) .typography-code,
|
||||
:root.mobile-pointer:not(.desktop-runtime) .typography-ui-header,
|
||||
:root.mobile-pointer:not(.desktop-runtime) .typography-ui-label,
|
||||
:root.mobile-pointer:not(.desktop-runtime) .typography-meta,
|
||||
:root.mobile-pointer:not(.desktop-runtime) .typography-micro {
|
||||
font-size: unset !important;
|
||||
}
|
||||
|
||||
/* Fix font size for tool displays */
|
||||
:root.mobile-pointer:not(.desktop-runtime) [class*="tool"],
|
||||
:root.mobile-pointer:not(.desktop-runtime) [class*="code"] {
|
||||
--text-code: 0.875rem !important;
|
||||
font-size: var(--text-code) !important;
|
||||
}
|
||||
|
||||
/* Improve touch targets for mobile */
|
||||
:root.mobile-pointer:not(.desktop-runtime) button,
|
||||
:root.mobile-pointer:not(.desktop-runtime) .btn,
|
||||
:root.mobile-pointer:not(.desktop-runtime) [role="button"] {
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
/* Improve input field touch targets */
|
||||
:root.mobile-pointer:not(.desktop-runtime) input,
|
||||
:root.mobile-pointer:not(.desktop-runtime) textarea,
|
||||
:root.mobile-pointer:not(.desktop-runtime) select {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
/* Fix mobile text inputs */
|
||||
:root.mobile-pointer:not(.desktop-runtime) input[type="text"],
|
||||
:root.mobile-pointer:not(.desktop-runtime) input[type="search"],
|
||||
:root.mobile-pointer:not(.desktop-runtime) input[type="email"],
|
||||
:root.mobile-pointer:not(.desktop-runtime) input[type="password"],
|
||||
:root.mobile-pointer:not(.desktop-runtime) textarea {
|
||||
font-size: 16px !important; /* Prevents iOS zoom */
|
||||
}
|
||||
|
||||
/* Prevent keyboard on non-input elements */
|
||||
:root.mobile-pointer:not(.desktop-runtime)
|
||||
button:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
||||
:root.mobile-pointer:not(.desktop-runtime) .btn,
|
||||
:root.mobile-pointer:not(.desktop-runtime) [role="button"] {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Specific fix for session buttons */
|
||||
:root.mobile-pointer:not(.desktop-runtime) button[inputmode="none"] {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Improve mobile spacing */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .px-4 {
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
:root.mobile-pointer:not(.desktop-runtime) .py-2 {
|
||||
padding-top: 0.75rem !important;
|
||||
padding-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* Fix mobile scroll containers */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .overflow-hidden {
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Fix mobile viewport height */
|
||||
:root.mobile-pointer:not(.desktop-runtime),
|
||||
:root.mobile-pointer:not(.desktop-runtime) body {
|
||||
height: 100%;
|
||||
height: -webkit-fill-available;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prevent iOS keyboard from scrolling the page */
|
||||
:root.device-mobile:not(.desktop-runtime) body,
|
||||
:root.device-mobile:not(.desktop-runtime) #root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
/* Fix main layout container */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Fix header positioning */
|
||||
:root.device-mobile:not(.desktop-runtime) .header-safe-area {
|
||||
position: fixed;
|
||||
top: var(--oc-visual-viewport-offset-top, 0px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* Fix main content area */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Fix chat container */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-full {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Ensure proper flex behavior */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Mobile sidebar positioning */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .mobile-sidebar-top {
|
||||
top: var(--header-height, 3rem);
|
||||
height: calc(100vh - var(--header-height, 3rem));
|
||||
}
|
||||
|
||||
/* Set header height variable */
|
||||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||||
--header-height: 3rem;
|
||||
}
|
||||
|
||||
/* For mobile devices with larger header */
|
||||
@media (max-width: 768px) {
|
||||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||||
--header-height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* For tablet devices */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||||
--header-height: 3.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* iOS PWA Adaptations */
|
||||
|
||||
/* Phase 1: iOS PWA safe area handling - Enhanced positioning approach */
|
||||
@media (display-mode: standalone) {
|
||||
/* iOS-specific safe area handling with CSS variable support */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
/* Safe area handling for fixed positioned elements */
|
||||
:root {
|
||||
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
||||
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
||||
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
||||
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
|
||||
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
||||
}
|
||||
|
||||
.header-safe-area {
|
||||
padding-top: var(--oc-safe-area-top);
|
||||
}
|
||||
|
||||
.main-content-safe-area {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--oc-safe-area-left);
|
||||
padding-right: var(--oc-safe-area-right);
|
||||
}
|
||||
|
||||
/* Safe area for bottom fixed/bottom-0 elements */
|
||||
.bottom-safe-area {
|
||||
padding-bottom: var(--oc-safe-area-bottom-visual) !important;
|
||||
}
|
||||
|
||||
/* iOS keyboard home indicator safe area - used when keyboard is open */
|
||||
.ios-keyboard-safe-area {
|
||||
padding-bottom: calc(var(--oc-keyboard-home-indicator, 34px) + var(--oc-safe-area-bottom-visual, 0px)) !important;
|
||||
}
|
||||
|
||||
/* Prevent keyboard-induced page scroll on iOS PWA */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
/* Fix iOS viewport issues */
|
||||
.flex.flex-col.h-screen {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
/* Prevent content overlap in iOS */
|
||||
.flex-1.overflow-hidden {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Update header height for iOS */
|
||||
.header-safe-area {
|
||||
--header-height: 4.5rem;
|
||||
}
|
||||
|
||||
.mobile-sidebar-top {
|
||||
--header-height: 4.5rem;
|
||||
}
|
||||
|
||||
/* Mobile typography improvements */
|
||||
.typography-markdown {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.typography-code {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.typography-ui-header {
|
||||
font-size: 0.9375rem !important;
|
||||
}
|
||||
|
||||
.typography-ui-label {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.typography-meta {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.typography-micro {
|
||||
font-size: 0.8125rem !important;
|
||||
}
|
||||
|
||||
/* Fix font size for tool displays */
|
||||
[class*="tool"], [class*="code"] {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback for non-iOS standalone mode */
|
||||
@supports not (-webkit-touch-callout: none) {
|
||||
:root {
|
||||
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
||||
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
||||
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
||||
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
|
||||
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
||||
}
|
||||
|
||||
.header-safe-area {
|
||||
padding-top: var(--oc-safe-area-top);
|
||||
}
|
||||
|
||||
.main-content-safe-area {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--oc-safe-area-left);
|
||||
padding-right: var(--oc-safe-area-right);
|
||||
}
|
||||
|
||||
.bottom-safe-area {
|
||||
padding-bottom: var(--oc-safe-area-bottom-visual) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Phase 6: Home indicator blur gradient fix */
|
||||
@media (display-mode: standalone) and (max-width: 768px) {
|
||||
.pwa-dialog-content {
|
||||
--pwa-dialog-padding: clamp(0.75rem, 3vw, 1.25rem);
|
||||
top: calc(50% + (var(--oc-safe-area-top, 0px) * 0.22));
|
||||
max-height: calc(100vh - var(--oc-safe-area-top, 0px) - var(--oc-safe-area-bottom-visual, 0px) - 20px);
|
||||
padding: var(--pwa-dialog-padding);
|
||||
padding-top: calc(var(--pwa-dialog-padding) + (var(--oc-safe-area-top, 0px) * 0.35));
|
||||
--tw-translate-y: calc(-50% + (var(--oc-safe-area-top, 0px) * 0.6));
|
||||
row-gap: clamp(0.75rem, 2vw, 1.25rem);
|
||||
}
|
||||
|
||||
.pwa-dialog-content.pwa-compact {
|
||||
--pwa-dialog-padding: clamp(0.5rem, 2vw, 0.85rem);
|
||||
row-gap: clamp(0.45rem, 1.5vw, 0.8rem);
|
||||
}
|
||||
|
||||
.pwa-dialog-content [data-slot="dialog-close"] {
|
||||
top: calc(0.25rem + (var(--oc-safe-area-top, 0px) * 0.35));
|
||||
right: var(--pwa-dialog-padding);
|
||||
}
|
||||
|
||||
.pwa-dialog-content.pwa-compact [data-slot="dialog-close"] {
|
||||
top: calc(0.2rem + (var(--oc-safe-area-top, 0px) * 0.3));
|
||||
}
|
||||
|
||||
.pwa-dialog-content .settings-page-body {
|
||||
max-width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.pwa-dialog-content .settings-page-body > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
|
||||
.pwa-dialog-content .directory-dialog-body {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.pwa-dialog-content .directory-dialog-body .directory-grid {
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.pwa-overlay-panel {
|
||||
margin-bottom: max(var(--oc-safe-area-bottom-visual, 0px), 12px);
|
||||
padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) * 0.4);
|
||||
}
|
||||
|
||||
.pwa-overlay-panel .pwa-overlay-scroll {
|
||||
padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) + 12px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (display-mode: standalone) {
|
||||
/* Home indicator blur overlay */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--background) 0%,
|
||||
var(--background) 30%,
|
||||
rgba(from var(--background) r g b / 0.8) 60%,
|
||||
rgba(from var(--background) r g b / 0.3) 85%,
|
||||
transparent 100%
|
||||
);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fallback for browsers without rgba(from ...) support */
|
||||
@supports not (color: rgba(from white r g b / 0.5)) {
|
||||
body::after {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--background) 0%,
|
||||
var(--background) 30%,
|
||||
rgba(21, 19, 19, 0.8) 60%, /* Dark theme fallback */
|
||||
rgba(21, 19, 19, 0.3) 85%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Light theme fallback */
|
||||
:root body::after {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--background) 0%,
|
||||
var(--background) 30%,
|
||||
rgba(248, 247, 243, 0.8) 60%, /* Light theme fallback */
|
||||
rgba(248, 247, 243, 0.3) 85%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Streamdown Styles
|
||||
Minimal overrides - fonts only, using Streamdown defaults
|
||||
@@ -1565,3 +627,18 @@ html:not(.dark) .chat-scroll {
|
||||
.animate-grid-pulse {
|
||||
animation: grid-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes marquee-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
.marquee-text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group:hover .marquee-text,
|
||||
.marquee-text:hover {
|
||||
animation: marquee-scroll 5s linear infinite alternate;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user