feat: integrate production cockpit AI assistant

2026-09-08 17:46:07 +08:00
parent 5e228e12ae
commit 93103c2579
66 changed files with 11046 additions and 374 deletions
@@ -723,6 +723,140 @@
  outline: none;
 }

+.assistant-control-suggestions {
+  width: 100%;
+  max-width: 314px;
+  box-sizing: border-box;
+  display: grid;
+  gap: 7px;
+  padding: 10px;
+  background: color-mix(in oklch, var(--card) 92%, var(--secondary));
+  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border));
+  border-radius: 14px;
+  box-shadow: 0 8px 24px color-mix(in oklch, var(--foreground) 6%, transparent);
+}
+
+.assistant-message-control-suggestions {
+  width: auto;
+  max-width: none;
+  align-self: stretch;
+}
+
+.assistant-message-control-suggestions .assistant-message-body {
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.assistant-control-suggestions-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  color: var(--assistant-muted, #64748b);
+  font-size: 10px;
+  font-weight: 760;
+}
+
+.assistant-control-suggestions-title svg {
+  width: 13px;
+  height: 13px;
+  color: var(--primary, #275df5);
+}
+
+.assistant-control-suggestion-list {
+  display: grid;
+  gap: 6px;
+}
+
+.assistant-control-suggestion {
+  width: 100%;
+  min-height: 46px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 9px;
+  color: var(--assistant-text, #233044);
+  text-align: left;
+  background: var(--card, #fff);
+  border: 1px solid var(--border, #dce3ed);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease,
+    transform 150ms ease, opacity 150ms ease;
+}
+
+.assistant-control-suggestion:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--primary) 5%, var(--card));
+  border-color: color-mix(in oklch, var(--primary) 38%, var(--border));
+  box-shadow: 0 5px 14px color-mix(in oklch, var(--primary) 10%, transparent);
+  transform: translateY(-1px);
+}
+
+.assistant-control-suggestion:focus-visible {
+  border-color: var(--ring, #275df5);
+  outline: 3px solid color-mix(in oklch, var(--ring, #275df5) 18%, transparent);
+  outline-offset: 1px;
+}
+
+.assistant-control-suggestion:disabled {
+  cursor: wait;
+  opacity: 0.55;
+}
+
+.assistant-control-suggestion.is-sending {
+  color: var(--status-info-foreground, #1741ad);
+  background: var(--status-info-soft, #edf2ff);
+  border-color: color-mix(in oklch, var(--status-info, #275df5) 36%, var(--border));
+  opacity: 1;
+}
+
+.assistant-control-suggestion-icon {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  color: var(--primary, #275df5);
+  background: color-mix(in oklch, var(--primary) 9%, transparent);
+  border-radius: 9px;
+}
+
+.assistant-control-suggestion-icon svg,
+.assistant-control-suggestion-arrow {
+  width: 15px;
+  height: 15px;
+}
+
+.assistant-control-suggestion-copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.assistant-control-suggestion-copy strong,
+.assistant-control-suggestion-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistant-control-suggestion-copy strong {
+  color: inherit;
+  font-size: 11px;
+  font-weight: 780;
+}
+
+.assistant-control-suggestion-copy small {
+  color: var(--assistant-muted, #64748b);
+  font-size: 8px;
+  font-weight: 650;
+}
+
+.assistant-control-suggestion-arrow {
+  color: var(--assistant-muted, #64748b);
+}
+
 .assistant-thinking {
  display: flex;
  align-items: center;