iris-chatbot 0.2.4

package/template/src/app/globals.css

@@ -0,0 +1,808 @@
+@import "tailwindcss";
+@import "reactflow/dist/style.css";
+
+:root {
+  --topbar-height: 64px;
+  --bg: #171819;
+  --bg-alt: #1b1c1d;
+  --sidebar: #181818;
+  --sidebar-border: #202020;
+  --panel: #202122;
+  --panel-2: #242526;
+  --panel-3: #2b2d2f;
+  --text-primary: #f8fafc;
+  --text-secondary: #d8dce0;
+  --text-muted: #b1b7bf;
+  --accent: #10a37f;
+  --accent-2: #0e8e6f;
+  --danger: #ef4444;
+  --border: #2a2a2a;
+  --border-strong: #3a3a3a;
+  --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+  --user-bubble: #0f2f28;
+}
+
+@theme inline {
+  --color-background: var(--bg);
+  --color-foreground: var(--text-primary);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--app-font, var(--font-sans));
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: var(--accent);
+}
+
+.chat-shell {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr);
+  min-height: 100vh;
+  transition: grid-template-columns 0.25s ease;
+}
+
+.chat-shell.collapsed {
+  grid-template-columns: 56px minmax(0, 1fr);
+}
+
+.sidebar {
+  background: var(--sidebar);
+  border-right: 1px solid var(--sidebar-border);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  transition: background 0.25s ease, width 0.25s ease;
+}
+
+.sidebar.collapsed {
+  background: var(--bg);
+}
+
+.sidebar.collapsed .sidebar-text {
+  display: none;
+}
+
+.topbar {
+  border-bottom: none;
+  background: transparent !important;
+  backdrop-filter: none;
+  box-shadow: none;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  height: var(--topbar-height);
+}
+
+
+.message-card {
+  border-radius: 14px;
+  padding: 8px 18px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
+  max-width: 70%;
+}
+
+.message-card.user {
+  background: var(--accent);
+  border-color: var(--accent);
+  border-radius: 18px 18px 6px 18px;
+  max-width: 80%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.message-card.user .message-content {
+  display: flex;
+  align-items: center;
+  min-height: 1.4em;
+  line-height: 1.45;
+}
+
+.message-row.user .message-content p {
+  margin: 0;
+}
+
+.message-row.user .message-content > :first-child,
+.message-row.user .message-content > :last-child {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.assistant-card {
+  max-width: 100%;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  position: relative;
+}
+
+.assistant-tool-timeline {
+  width: 100%;
+  max-width: 100%;
+}
+
+.assistant-collapse-row {
+  position: absolute;
+  top: 2px;
+  right: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.assistant-card:hover .assistant-collapse-row {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.assistant-collapse-toggle {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 999px;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+
+.assistant-collapse-toggle:hover {
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+  background: var(--panel-2);
+}
+
+.assistant-collapsed-preview {
+  color: var(--text-secondary);
+  margin: 0;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.assistant-collapsed-preview:hover,
+.assistant-collapsed-preview:focus-visible {
+  color: var(--text-primary);
+  outline: none;
+}
+
+.assistant-card .message-content {
+  padding-right: 42px;
+}
+
+.message-row {
+  display: flex;
+  width: 100%;
+}
+
+.message-row.user {
+  justify-content: flex-end;
+}
+
+.message-row.assistant {
+  justify-content: flex-start;
+}
+
+.message-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 12px;
+  width: 100%;
+}
+
+.message-row.user .message-stack {
+  align-items: flex-end;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.message-row.assistant .message-stack {
+  align-items: flex-start;
+}
+
+.message-row.user .message-actions,
+.message-row.user .message-card {
+  align-self: flex-end;
+}
+
+.message-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.message-actions.user {
+  justify-content: flex-end;
+}
+
+.message-actions.assistant {
+  justify-content: flex-start;
+}
+
+.message-content {
+  line-height: 1.6;
+  font-size: 15px;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  min-width: 0;
+}
+
+.assistant-card .message-content {
+  color: #f8fafc;
+}
+
+.message-loading-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  animation: message-spinner-rotate 0.8s linear infinite;
+  margin: 4px 0;
+}
+
+@keyframes message-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.composer-bar {
+  position: sticky;
+  bottom: 0;
+  background: transparent;
+  z-index: 30;
+}
+
+.empty-hero {
+  min-height: calc(100vh - var(--topbar-height) - 140px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 18px;
+}
+
+.empty-hero-title {
+  transform: translateY(-34px);
+}
+
+.empty-composer {
+  width: min(720px, 90%);
+}
+
+[data-theme="light"] {
+  --bg: #f4f4f4;
+  --bg-alt: #f8f8f8;
+  --sidebar: #ffffff;
+  --sidebar-border: #e5e5e5;
+  --panel: #ffffff;
+  --panel-2: #f0f0f0;
+  --panel-3: #e8e8e8;
+  --text-primary: #111111;
+  --text-secondary: #4a4a4a;
+  --text-muted: #6f6f6f;
+  --accent: #0e8e6f;
+  --accent-2: #0b7a5f;
+  --danger: #dc2626;
+  --border: #d5d5d5;
+  --border-strong: #bdbdbd;
+  --shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
+  --user-bubble: #d7f2ea;
+}
+
+.message-content h1,
+.message-content h2,
+.message-content h3,
+.message-content h4 {
+  font-weight: 760;
+  color: var(--text-primary);
+  line-height: 1.25;
+  margin: 1.05em 0 0.55em;
+}
+
+.message-content h1 { font-size: 1.5rem; }
+.message-content h2 { font-size: 1.3rem; }
+.message-content h3 { font-size: 1.14rem; }
+.message-content h4 { font-size: 1.03rem; }
+
+.message-content > :first-child {
+  margin-top: 0;
+}
+
+.message-content p {
+  margin: 0.6em 0;
+}
+
+.message-content ul,
+.message-content ol {
+  margin: 0.6em 0;
+  padding-left: 1.5rem;
+}
+
+.message-content ul { list-style: disc; }
+.message-content ol { list-style: decimal; }
+
+.message-content li {
+  margin: 0.28em 0;
+}
+
+.message-content li > ul,
+.message-content li > ol {
+  margin: 0.35em 0 0.15em;
+}
+
+.message-content .md-table-wrap {
+  position: relative;
+  margin: 0.9em 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.message-content table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
+}
+
+.message-content th,
+.message-content td {
+  padding: 8px 10px;
+  text-align: left;
+  border-right: 1px solid var(--border-strong);
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.message-content tr > :last-child {
+  border-right: 0;
+}
+
+.message-content tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.message-content thead {
+  background: var(--panel-3);
+}
+
+.message-content code {
+  font-family: var(--font-mono);
+  background: rgba(255, 255, 255, 0.08);
+  padding: 2px 4px;
+  border-radius: 6px;
+  font-size: 0.9em;
+}
+
+.message-content pre {
+  background: #101010;
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  padding: 14px 16px;
+  overflow: auto;
+  margin: 0.8em 0;
+}
+
+.message-content pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.message-content strong {
+  font-weight: 760;
+  color: var(--text-primary);
+}
+
+.message-content em {
+  font-style: italic;
+}
+
+.message-content blockquote {
+  border-left: 3px solid var(--border-strong);
+  padding-left: 12px;
+  color: var(--text-secondary);
+  margin: 0.8em 0;
+}
+
+.message-content a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+.source-badge-row {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.source-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 12px;
+  line-height: 1;
+  max-width: 220px;
+  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
+}
+
+.source-badge:hover {
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+  background: var(--panel-3);
+}
+
+.source-badge-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.source-badge-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message-content hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: 1.1em 0;
+}
+
+.composer {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 10px 12px;
+}
+
+.thread-shelf {
+  margin-top: 12px;
+  padding-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.thread-shelf::-webkit-scrollbar {
+  display: none;
+}
+
+.thread-box-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  z-index: 0;
+}
+
+.thread-box {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 14px;
+  background: var(--panel-3);
+  font-size: 13px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  margin-right: 6px;
+}
+
+.thread-box.active {
+  border-color: var(--accent);
+  color: var(--text-primary);
+}
+
+.thread-delete {
+  position: absolute;
+  top: -6px;
+  right: -2px;
+  height: 18px;
+  width: 18px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: var(--panel);
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.thread-delete:hover {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.composer-textarea {
+  background: transparent;
+  resize: none;
+  outline: none;
+  line-height: 1.4;
+  padding-top: 7px;
+  padding-bottom: 9px;
+  /* One line by default; height grows with content in Composer.tsx */
+  min-height: calc(1.4em + 7px + 9px);
+}
+
+.send-button {
+  height: 40px;
+  width: 40px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.send-button:hover {
+  border-color: var(--border-strong);
+}
+
+.send-button.active {
+  background: #ffffff;
+  color: #111111;
+  border-color: transparent;
+}
+
+.mic-button {
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: transparent;
+}
+
+.mic-button:hover {
+  background: transparent;
+  color: var(--text-primary);
+  border-color: transparent;
+}
+
+.mic-button.active {
+  background: #ffffff;
+  color: #111111;
+  border-color: transparent;
+}
+
+.mic-button:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+}
+
+.node-base {
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: var(--panel-2);
+  font-size: 12px;
+  color: var(--text-primary);
+  width: 220px;
+  box-shadow: var(--shadow);
+}
+
+.node-user {
+  background: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
+}
+
+.node-assistant {
+  background: var(--panel-2);
+  border-color: var(--border-strong);
+}
+
+.node-system {
+  background: color-mix(in srgb, var(--panel-2) 80%, #9ca3af 20%);
+  border-color: color-mix(in srgb, var(--border-strong) 70%, #9ca3af 30%);
+}
+
+.node-active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-2);
+}
+
+.react-flow__controls button {
+  background: var(--panel-2) !important;
+  border: 1px solid var(--border) !important;
+  color: var(--text-primary) !important;
+}
+
+.react-flow__attribution {
+  display: none !important;
+}
+
+.react-flow__minimap {
+  background: var(--panel) !important;
+}
+
+.react-flow__background {
+  background: var(--bg) !important;
+}
+
+.map-shell {
+  margin-top: calc(-1 * var(--topbar-height));
+  height: calc(100% + var(--topbar-height));
+}
+
+@media (max-width: 980px) {
+  .chat-shell {
+    --mobile-sidebar-width: min(248px, 82vw);
+    position: relative;
+  }
+
+  .chat-shell {
+    grid-template-columns: 56px minmax(0, 1fr);
+  }
+
+  .sidebar {
+    display: block;
+    width: 56px;
+    min-width: 56px;
+    max-width: 56px;
+    position: sticky;
+    top: 0;
+    z-index: 45;
+  }
+
+  .chat-shell:not(.collapsed) {
+    grid-template-columns: 56px minmax(0, 1fr);
+  }
+
+  .sidebar:not(.collapsed) {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: var(--mobile-sidebar-width);
+    min-width: var(--mobile-sidebar-width);
+    max-width: var(--mobile-sidebar-width);
+    height: 100vh;
+    z-index: 60;
+    border-right: 1px solid var(--sidebar-border);
+    box-shadow: 4px 0 14px rgba(0, 0, 0, 0.16);
+    background: var(--sidebar);
+  }
+
+  .chat-shell:not(.collapsed)::after {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: var(--mobile-sidebar-width);
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.18);
+    pointer-events: none;
+    z-index: 50;
+  }
+
+  .chat-scroll {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .composer-bar {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .message-stack {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .message-card {
+    max-width: 88%;
+  }
+
+  .message-card.user {
+    max-width: 92%;
+  }
+}
+.model-menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  min-width: 200px;
+  max-height: 260px;
+  overflow: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 6px;
+  z-index: 50;
+  box-shadow: var(--shadow);
+}
+
+.model-menu-item {
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.model-menu-item:hover,
+.model-menu-item.active {
+  background: var(--panel-2);
+  color: var(--text-primary);
+}
+
+.sidebar-collapsed-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  margin-top: 6px;
+}
+
+.sidebar-icon-button {
+  height: 38px;
+  width: 38px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.sidebar-icon-button:hover {
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+.chat-scroll {
+  padding-top: calc(var(--topbar-height) - 20px);
+}
+
+.chat-scroll.empty {
+  padding-top: var(--topbar-height);
+}