@m6d/cortex-react 0.7.0 → 0.8.0

package/dist/styles.css

@@ -55,6 +55,14 @@
     monospace
   );
   --cortex-font-size: 0.8125rem;
+  /* These read --cortex-font-size (or the color named) when unset, so they ship
+   * unset: declaring one here gives that part its own value.
+   *
+   * --cortex-font-size-message: 0.875rem;      message bubbles and the composer
+   * --cortex-font-size-header: 0.875rem;       the chat and history titles
+   * --cortex-color-send-empty: transparent;    the send button with nothing to send
+   * --cortex-color-send-empty-text: var(--cortex-color-text-muted);
+   */
   /* The widget's headings read --cortex-font-display and fall back to `inherit`,
    * so it ships unset on purpose — declaring it here is how you opt in:
    *
@@ -364,8 +372,13 @@
 .cortex-widget__container--full .cortex-widget__history-btn {
   display: none;
 }
+@media (min-width: 769px) {
+  .cortex-widget__container--full > .cortex-widget__screen:nth-child(2) .cortex-widget__new-btn {
+    display: none;
+  }
+}
 .cortex-widget__container--full .cortex-widget__chat-title {
-  font-size: 0.875rem;
+  font-size: var(--cortex-font-size-header, 0.875rem);
 }
 .cortex-widget__container--full .cortex-widget__chat-header {
   background: var(--cortex-color-surface);
@@ -464,8 +477,7 @@
   background: var(--cortex-color-surface);
 }
 
-.cortex-widget__back-btn,
-.cortex-widget__history-btn {
+.cortex-widget__header-btn {
   flex-shrink: 0;
   width: 2rem;
   height: 2rem;
@@ -479,8 +491,7 @@
   transition: color 0.15s, background-color 0.15s;
   color: var(--cortex-color-text-muted);
 }
-.cortex-widget__back-btn:hover,
-.cortex-widget__history-btn:hover {
+.cortex-widget__header-btn:hover {
   color: var(--cortex-color-text);
   background: var(--cortex-color-surface-muted);
 }
@@ -496,7 +507,7 @@
 
 .cortex-widget__chat-title {
   font-family: var(--cortex-font-display, inherit);
-  font-size: var(--cortex-font-size);
+  font-size: var(--cortex-font-size-header, var(--cortex-font-size));
   font-weight: 500;
   color: var(--cortex-color-text-strong);
   overflow: hidden;
@@ -660,13 +671,8 @@ cortex-llm-usage-chips {
   border-radius: calc(var(--cortex-radius) * 1.5);
   border: 1px solid var(--cortex-color-border);
   padding: 0.375rem;
-  transition: border-color 0.15s, background-color 0.15s;
-}
-.cortex-widget__input-box--disabled {
-  background: var(--cortex-color-surface-muted);
-}
-.cortex-widget__input-box--enabled {
   background: color-mix(in oklab, var(--cortex-color-surface-subtle) 45%, var(--cortex-color-surface));
+  transition: border-color 0.15s, background-color 0.15s;
 }
 .cortex-widget__input-box--enabled:focus-within {
   border-color: var(--cortex-color-border-strong);
@@ -678,16 +684,23 @@ cortex-llm-usage-chips {
   background: var(--cortex-color-surface-muted);
 }
 
-.cortex-widget__textarea {
-  flex: 1;
+.cortex-widget__textarea,
+.cortex-widget__textarea:focus,
+.cortex-widget__textarea:focus-visible,
+.cortex-widget__textarea:disabled {
   background: transparent;
-  resize: none;
   border: 0;
   outline: none;
-  font-size: var(--cortex-font-size);
+  box-shadow: none;
+}
+
+.cortex-widget__textarea {
+  flex: 1;
+  resize: none;
+  font-size: var(--cortex-font-size-message, var(--cortex-font-size));
   padding: 0.375rem 0.5rem;
   min-height: 28px;
-  max-height: calc(5.5 * var(--cortex-font-size) + 0.75rem);
+  max-height: calc(5.5 * var(--cortex-font-size-message, var(--cortex-font-size)) + 0.75rem);
   overflow-y: auto;
   line-height: 1.375;
   color: var(--cortex-color-text-strong);
@@ -701,7 +714,6 @@ cortex-llm-usage-chips {
 }
 .cortex-widget__textarea:disabled {
   cursor: not-allowed;
-  border: 0;
 }
 
 .cortex-widget__input-actions {
@@ -808,8 +820,8 @@ cortex-llm-usage-chips {
   cursor: default;
 }
 .cortex-widget__send-btn--empty {
-  background: var(--cortex-color-border);
-  color: var(--cortex-color-text-muted);
+  background: var(--cortex-color-send-empty, transparent);
+  color: var(--cortex-color-send-empty-text, var(--cortex-color-text-muted));
 }
 .cortex-widget__send-btn--ready {
   background: var(--cortex-color-primary);
@@ -831,13 +843,13 @@ cortex-llm-usage-chips {
   align-items: center;
   gap: 0.75rem;
 }
-.cortex-widget__threads-header .cortex-widget__new-chat-btn {
+.cortex-widget__threads-header .cortex-widget__new-btn {
   margin-inline-start: auto;
 }
 
 .cortex-widget__threads-title {
   font-family: var(--cortex-font-display, inherit);
-  font-size: 0.9375rem;
+  font-size: var(--cortex-font-size-header, 0.9375rem);
   font-weight: 600;
   color: var(--cortex-color-text-heading);
   letter-spacing: -0.01em;
@@ -1218,9 +1230,9 @@ cortex-llm-usage-chips {
   position: absolute;
   inset: -0.25rem;
   border-radius: 9999px;
-  border: 1.5px solid transparent;
+  border: 1.5px solid color-mix(in oklab, var(--cortex-color-accent) 18%, transparent);
   border-top-color: var(--cortex-color-accent);
-  border-right-color: color-mix(in oklab, var(--cortex-color-accent) 40%, transparent);
+  border-right-color: color-mix(in oklab, var(--cortex-color-accent) 45%, transparent);
 }
 .cortex-working-avatar--shown .cortex-working-avatar__ring {
   animation: cortex-tool-spin 1s linear infinite;
@@ -1260,15 +1272,15 @@ cortex-llm-usage-chips {
 
 .cortex-text-bubble--assistant,
 .cortex-subtle-activity,
-.cortex-tool-pill:not(.cortex-tool-pill--gated),
-.cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+.cortex-tool-pill,
+.cortex-tool-pill .cortex-tool-pill__icon {
   transition: translate 420ms cubic-bezier(0.76, 0, 0.24, 1) 160ms;
 }
 
 .cortex-message--working-turn .cortex-text-bubble--assistant,
 .cortex-message--working-turn .cortex-subtle-activity,
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated),
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+.cortex-message--working-turn .cortex-tool-pill,
+.cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
   transition-delay: 0s;
 }
 .cortex-message--working-turn .cortex-text-bubble--assistant,
@@ -1279,16 +1291,16 @@ cortex-llm-usage-chips {
 [dir=rtl] .cortex-message--working-turn .cortex-subtle-activity {
   translate: -2rem;
 }
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) {
+.cortex-message--working-turn .cortex-tool-pill {
   translate: 0.875rem;
 }
-[dir=rtl] .cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) {
+[dir=rtl] .cortex-message--working-turn .cortex-tool-pill {
   translate: -0.875rem;
 }
-.cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+.cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
   translate: -0.5rem;
 }
-[dir=rtl] .cortex-message--working-turn .cortex-tool-pill:not(.cortex-tool-pill--gated) .cortex-tool-pill__icon {
+[dir=rtl] .cortex-message--working-turn .cortex-tool-pill .cortex-tool-pill__icon {
   translate: 0.5rem;
 }
 
@@ -1425,7 +1437,7 @@ cortex-llm-usage-chips {
   max-width: 80%;
   min-width: 0;
   overflow-wrap: anywhere;
-  font-size: var(--cortex-font-size);
+  font-size: var(--cortex-font-size-message, var(--cortex-font-size));
   line-height: 1.625;
   padding: 1rem;
   border-radius: calc(var(--cortex-radius) * 2);
@@ -1702,6 +1714,92 @@ cortex-llm-usage-chips {
   color: var(--cortex-color-text-muted);
 }
 
+.cortex-table-block {
+  display: block;
+  margin: 0.5em 0 0.75em;
+}
+.cortex-table-block th {
+  white-space: nowrap;
+}
+.cortex-table-block td {
+  max-width: 20rem;
+}
+.cortex-table-block table {
+  margin: 0;
+}
+
+.cortex-table-block__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.125rem;
+  min-height: 1.75rem;
+  margin-bottom: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.cortex-table-block:hover .cortex-table-block__actions, .cortex-table-block:focus-within .cortex-table-block__actions {
+  opacity: 1;
+}
+@media (hover: none) {
+  .cortex-table-block__actions {
+    opacity: 1;
+  }
+}
+
+.cortex-table-block__action {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--cortex-color-text-muted);
+}
+.cortex-table-block__action:hover {
+  color: var(--cortex-color-text);
+  background: var(--cortex-color-hover);
+}
+
+.cortex-table-block__dialog {
+  width: min(72rem, 100vw - 2rem);
+  max-width: none;
+  max-height: calc(100vh - 2rem);
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: calc(var(--cortex-radius) * 1.5);
+  background: var(--cortex-color-surface);
+  color: var(--cortex-color-text-strong);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+}
+.cortex-table-block__dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+.cortex-table-block__dialog::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.cortex-table-block__dialog-head {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.125rem;
+  padding: 0.375rem;
+  border-bottom: 1px solid var(--cortex-color-border);
+}
+
+.cortex-table-block__dialog-body {
+  overflow: auto;
+  padding: 0 1rem;
+}
+
 .cortex-reasoning-details {
   width: 100%;
   border-radius: var(--cortex-radius);
@@ -2324,51 +2422,125 @@ details[open] > summary .cortex-debug-tool__chevron {
   font-variant-numeric: tabular-nums;
 }
 
-.cortex-tool-pill--gated {
+.cortex-approval-card {
+  display: block;
+  max-width: min(100%, 28rem);
+  margin: 0.25rem 0;
   border: 1px solid var(--cortex-color-border);
-  border-radius: 9999px;
-  background: var(--cortex-color-surface-subtle);
-  padding: 0.3rem 0.75rem 0.3rem 0.65rem;
-  gap: 0.6rem;
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  overflow: hidden;
 }
-
-.cortex-tool-pill--asking {
-  padding-inline-end: 0.3rem;
-  flex-wrap: wrap;
+.cortex-approval-card--asking {
+  border-color: color-mix(in oklab, var(--cortex-color-accent) 45%, var(--cortex-color-border));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cortex-color-accent) 10%, transparent);
 }
 
-.cortex-tool-pill__dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  background: var(--cortex-color-accent);
+.cortex-approval-card__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cortex-color-accent);
 }
 
-.cortex-tool-pill--gated .cortex-tool-pill__title {
+.cortex-approval-card__sentence {
+  margin: 0;
+  padding: 0.375rem 0.75rem 0.5rem;
+  font-weight: 600;
   color: var(--cortex-color-text-heading);
-  white-space: normal;
 }
 
-.cortex-tool-pill__actions {
+.cortex-approval-card__sentence--full {
+  padding-top: 0;
+  font-weight: 400;
+  color: var(--cortex-color-text-strong);
+}
+
+.cortex-approval-card__rows {
+  display: grid;
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  gap: 0.1875rem 0.75rem;
+  margin: 0;
+  padding: 0 0.75rem 0.75rem;
+  font-size: 0.78125rem;
+}
+.cortex-approval-card__rows dt {
+  color: var(--cortex-color-text-secondary);
+  overflow-wrap: anywhere;
+}
+.cortex-approval-card__rows dd {
+  max-height: 6rem;
+  margin: 0;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  color: var(--cortex-color-text-strong);
+  overflow-wrap: anywhere;
+}
+
+.cortex-approval-card__foot {
   display: flex;
-  gap: 0.3rem;
-  margin-inline-start: 0.25rem;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border-top: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface-subtle);
 }
 
-.cortex-tool-pill__action {
+.cortex-approval-card__button {
   border: 1px solid var(--cortex-color-border-strong);
-  border-radius: 9999px;
-  background: none;
-  padding: 4px 11px;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  background: var(--cortex-color-surface);
+  padding: 0.375rem 0.875rem;
   font: inherit;
-  font-size: 12.5px;
-  color: var(--cortex-color-text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--cortex-color-text-strong);
   cursor: pointer;
 }
-.cortex-tool-pill__action--approve {
-  background: var(--cortex-color-accent);
+.cortex-approval-card__button--approve {
   border-color: var(--cortex-color-accent);
-  color: #fff;
+  background: var(--cortex-color-accent);
+  color: var(--cortex-color-primary-foreground);
+}
+
+.cortex-approval-card__line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-approval-card__line .cortex-tool-pill__icon {
+  flex-shrink: 0;
+}
+
+.cortex-approval-card__decision {
+  font-weight: 600;
+  color: var(--cortex-color-text-strong);
+}
+
+.cortex-approval-card__summary {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cortex-approval-card__details {
+  flex-shrink: 0;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-secondary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
 }
 
 .cortex-tool-fold {

package/dist/theme.css

@@ -63,6 +63,15 @@
   );
   --cortex-font-size: 0.8125rem;
 
+  /* These read --cortex-font-size (or the color named) when unset, so they ship
+   * unset: declaring one here gives that part its own value.
+   *
+   * --cortex-font-size-message: 0.875rem;      message bubbles and the composer
+   * --cortex-font-size-header: 0.875rem;       the chat and history titles
+   * --cortex-color-send-empty: transparent;    the send button with nothing to send
+   * --cortex-color-send-empty-text: var(--cortex-color-text-muted);
+   */
+
   /* The widget's headings read --cortex-font-display and fall back to `inherit`,
    * so it ships unset on purpose — declaring it here is how you opt in:
    *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@m6d/cortex-react",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "React chat widget SDK for cortex servers",
     "license": "MIT",
     "sideEffects": [