@nordmanai/nif 0.1.0 → 0.2.1

package/registry/ui/components/nm-chatbox/nm-chatbox.css

@@ -0,0 +1,682 @@
+  .nm-chatbox {
+    --nm-chatbox-icon: var(--nm-icon-button);
+    --nm-chatbox-control: var(--nm-icon-control);
+    /* Collapsed box is the control plus the 12px inset. The corner stays half of that. */
+    --nm-chatbox-height: calc(var(--nm-chatbox-control) + var(--nm-space-12) * 2);
+    --nm-chatbox-radius: var(--nm-radius-lg);
+    --nm-chatbox-line: var(--nm-space-24);
+    --nm-chatbox-visible-lines: 3;
+    --nm-chatbox-attachment: calc(var(--nm-space-40) * 2);
+    --nm-chatbox-integration-icon: url('/interface/chatbox/integration.svg');
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--nm-space-16);
+    width: min(100%, var(--nm-chatbox-width));
+    border: 0;
+    border-radius: var(--nm-chatbox-radius);
+    background: var(--nm-raised);
+  }
+
+  /* Padding is the box inset. Utilities on the same node must not replace it. */
+  .nm-chatbox.nm-chatbox {
+    padding: var(--nm-space-12) !important;
+  }
+
+  .nm-chatbox[data-expanded='true'] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--nm-space-24);
+  }
+
+  .nm-chatbox__files,
+  .nm-chatbox__file-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--nm-space-8);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .nm-chatbox__file-list[data-rtl='true'] {
+    flex-direction: row-reverse;
+  }
+
+  .nm-chatbox__file-item {
+    flex: 0 0 auto;
+  }
+
+  .nm-chatbox__image-attachment {
+    position: relative;
+    display: block;
+    flex-shrink: 0;
+    width: var(--nm-chatbox-attachment);
+    height: var(--nm-chatbox-attachment);
+    border-radius: var(--nm-radius-md);
+    background: var(--nm-line);
+  }
+
+  .nm-chatbox__image-preview {
+    width: var(--nm-chatbox-attachment);
+    height: var(--nm-chatbox-attachment);
+    border-radius: var(--nm-radius-md);
+    background-color: var(--nm-line);
+  }
+
+  .nm-chatbox__image-attachment > button {
+    top: var(--nm-space-4);
+    right: var(--nm-space-4);
+    transform: none;
+    opacity: 0;
+    transition: opacity var(--control-duration) var(--ease);
+  }
+
+  .nm-chatbox__image-attachment:hover > button,
+  .nm-chatbox__image-attachment:focus-within > button {
+    opacity: 1;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']) .nm-chatbox__row {
+    display: contents;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']) > .flex {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']) .nm-chatbox__tools {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']) .nm-chatbox__actions {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .nm-chatbox__queue {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']) .nm-chatbox__queue {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']):has(.nm-chatbox__queue) .nm-chatbox__tools,
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']):has(.nm-chatbox__queue) > .flex,
+  .nm-chatbox:not([data-expanded='true']):not([data-dictating='true']):has(.nm-chatbox__queue) .nm-chatbox__actions {
+    grid-row: 2;
+  }
+
+  .nm-chatbox__queue-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    max-height: calc(3 * 2.5rem + 2 * var(--nm-space-2));
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  .nm-chatbox__queue-list[data-scrolling='true'] {
+    scrollbar-width: thin;
+  }
+
+  .nm-chatbox__queue-list::-webkit-scrollbar {
+    width: 0;
+  }
+
+  .nm-chatbox__queue-list[data-scrolling='true']::-webkit-scrollbar {
+    width: var(--nm-space-4);
+  }
+
+  .nm-chatbox__queue-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    min-width: 0;
+    padding: var(--nm-space-8) var(--nm-space-12);
+    border: 0;
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-panel);
+  }
+
+  .nm-chatbox__queue-text {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-type-ui-sm);
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-chatbox__queue-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-4);
+  }
+
+  .nm-chatbox__queue-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nm-space-4);
+    border: 0;
+    border-radius: var(--nm-radius-lg);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    cursor: pointer;
+  }
+
+  .nm-chatbox__queue-action:hover:not(:disabled) {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  .nm-chatbox__queue-action:disabled {
+    opacity: var(--nm-soon-opacity);
+    cursor: default;
+  }
+
+  .nm-chatbox__queue-action svg {
+    width: var(--nm-type-ui-sm);
+    height: var(--nm-type-ui-sm);
+  }
+
+  .nm-chatbox__prompt {
+    position: relative;
+    width: 100%;
+  }
+
+  .nm-chatbox__placeholder,
+  .nm-chatbox__field,
+  .nm-chatbox__inline,
+  .nm-chatbox__connect-title {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+    font-style: normal;
+    line-height: var(--nm-space-24);
+    letter-spacing: normal;
+  }
+
+  .nm-chatbox__connect-title {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    color: var(--nm-fg);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nm-chatbox__connect-icon {
+    width: var(--nm-chatbox-icon);
+    height: var(--nm-chatbox-icon);
+    flex-shrink: 0;
+  }
+
+  .nm-chatbox__placeholder {
+    position: absolute;
+    inset: 0;
+    color: var(--nm-fg-subtle);
+    pointer-events: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nm-chatbox__placeholder[data-hidden='true'] {
+    visibility: hidden;
+  }
+
+  .nm-chatbox__placeholder-emphasis {
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-chatbox .nm-chatbox__field {
+    display: block;
+    position: relative;
+    width: 100%;
+    min-height: var(--nm-chatbox-line);
+    max-height: calc(var(--nm-chatbox-line) * var(--nm-chatbox-visible-lines)) !important;
+    appearance: none;
+    background: transparent;
+    color: var(--nm-fg);
+    caret-color: var(--nm-fg);
+    resize: none;
+    overflow-x: hidden;
+    overflow-y: auto !important;
+    overscroll-behavior: contain;
+  }
+
+  .nm-chatbox[data-collapsed='true'] .nm-chatbox__field {
+    max-height: var(--nm-chatbox-line) !important;
+  }
+
+  /* The prompt sits inside the pill. A focused rectangle around the placeholder
+     is the global text-field outline (keyboard modality, and the dark
+     :focus-visible fallback). The caret is the focus indicator here. */
+  .nm-chatbox__field:is(:focus, :focus-visible),
+  html[data-input-modality='keyboard'] .nm-chatbox__field:is(:focus, :focus-visible) {
+    outline: none !important;
+    outline-offset: 0 !important;
+    box-shadow: none !important;
+  }
+
+  .nm-chatbox__field[data-inline-links='true'] {
+    z-index: 1;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .nm-chatbox__inline {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: auto;
+    scrollbar-width: none;
+    pointer-events: none;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    color: var(--nm-fg);
+    user-select: none;
+  }
+
+  .nm-chatbox__inline::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nm-chatbox__inline-link {
+    display: inline;
+    pointer-events: auto;
+    padding: 0 var(--nm-space-4);
+    margin: 0 calc(var(--nm-space-4) * -1);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-panel);
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+
+  .nm-chatbox__field::placeholder {
+    color: transparent;
+    font: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+
+  .nm-chatbox__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    width: auto;
+    min-height: var(--nm-chatbox-control);
+  }
+
+  .nm-chatbox[data-expanded='true'] .nm-chatbox__row,
+  .nm-chatbox[data-dictating='true'] .nm-chatbox__row {
+    width: 100%;
+  }
+
+  .nm-chatbox[data-dictating='true'] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nm-chatbox__row[data-dictating='true'] {
+    gap: var(--nm-space-24);
+  }
+
+  .nm-chatbox__tools,
+  .nm-chatbox__actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-chatbox__dictation {
+    display: flex;
+    flex: 1 1 auto;
+    align-self: stretch;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .nm-chatbox__tools {
+    flex: 0 0 auto;
+    min-width: 0;
+  }
+
+  .nm-chatbox__tools > :empty {
+    display: none;
+  }
+
+  .nm-chatbox[data-expanded='true'] .nm-chatbox__tools,
+  .nm-chatbox[data-dictating='true'] .nm-chatbox__tools {
+    flex: 1 1 auto;
+  }
+
+  .nm-chatbox [data-testid='dictation-cancel'][data-busy='true'] {
+
+    opacity: 0.5;
+  }
+
+  .nm-chatbox__tool img,
+  .nm-chatbox #attach-file img,
+  .nm-chatbox #attach-file-menu-button img,
+  .nm-chatbox #tools-dropdown-button img,
+  .nm-chatbox #audio-recorder img,
+  .nm-chatbox [data-testid='agent-control-button'] img,
+  .nm-chatbox [data-testid='dictation-cancel'] img,
+  .nm-chatbox [data-testid='dictation-confirm'] img,
+  .nm-chatbox [data-testid='dictation-confirm'] svg,
+  .nm-chatbox [data-testid='send-button'] img,
+  .nm-chatbox [data-testid='send-button'] svg,
+  .nm-chatbox svg.nm-icon {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-chatbox__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-4);
+    padding: var(--nm-icon-pad);
+    border: var(--nm-rule) solid var(--nm-line);
+    border-radius: calc((var(--nm-icon-control) + var(--nm-rule) * 2) / 2);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    appearance: none;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-semibold);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .nm-chatbox__chip-icon {
+    display: block;
+    flex-shrink: 0;
+    width: var(--nm-chatbox-icon);
+    height: var(--nm-chatbox-icon);
+    background-color: currentColor;
+    -webkit-mask: var(--nm-chatbox-integration-icon) center / contain no-repeat;
+    mask: var(--nm-chatbox-integration-icon) center / contain no-repeat;
+  }
+
+  .nm-chatbox__chip--connected .nm-chatbox__chip-icon {
+    background-color: var(--nm-ok);
+  }
+
+  .nm-chatbox__chip img {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-chatbox [data-loading='true'] svg {
+    animation: nm-chatbox-spin 0.8s linear infinite;
+  }
+
+  @keyframes nm-chatbox-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-chatbox [data-loading='true'] svg {
+      animation: none;
+    }
+  }
+
+  html[data-interface='nordman'] .nm-chatbox-menu.popover-ui {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    width: var(--popover-anchor-width);
+    max-width: var(--popover-available-width, 100%);
+    max-height: min(var(--nm-dropdown-max), var(--popover-available-height, 100dvh));
+    margin: 0;
+    padding: var(--nm-list-pad);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 0;
+    border-radius: var(--nm-menu-radius);
+    background: var(--nm-raised);
+    box-shadow: none;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    scrollbar-width: none;
+  }
+
+  .nm-chatbox-menu.popover-ui[data-scrolling='true'] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--nm-stroke) transparent;
+  }
+
+  .nm-chatbox-menu.popover-ui::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .nm-chatbox-menu.popover-ui[data-scrolling='true']::-webkit-scrollbar {
+    width: var(--nm-rail-scrollbar);
+    height: var(--nm-rail-scrollbar);
+  }
+
+  .nm-chatbox-menu.popover-ui[data-scrolling='true']::-webkit-scrollbar-thumb {
+    background: var(--nm-stroke);
+    border-radius: var(--nm-radius-sm);
+  }
+
+  .nm-chatbox-menu .nm-chatbox-menu__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    width: 100%;
+    margin: 0;
+    padding: var(--nm-space-6);
+    border-radius: var(--nm-panel-item-radius);
+    background: transparent;
+    color: var(--nm-fg);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-ui);
+  }
+
+  .nm-chatbox-menu .nm-chatbox-menu__item:hover,
+  .nm-chatbox-menu .nm-chatbox-menu__item:focus-visible,
+  .nm-chatbox-menu .nm-chatbox-menu__item[data-active-item],
+  .nm-chatbox-menu .nm-chatbox-menu__item--active {
+    background: var(--nm-panel);
+  }
+
+  .nm-chatbox-menu:has(.nm-chatbox-menu__item--active)
+    .nm-chatbox-menu__item[data-active-item]:not(.nm-chatbox-menu__item--active):not(:hover) {
+    background: transparent;
+  }
+
+  .nm-chatbox-menu__copy {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-16);
+  }
+
+  .nm-chatbox-menu__hint {
+    flex-shrink: 0;
+    color: var(--nm-stroke);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    text-align: right;
+  }
+
+  .nm-chatbox-menu .nm-chatbox-menu__section {
+    padding: var(--nm-space-6);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    cursor: default;
+    opacity: 1;
+  }
+
+  .nm-chatbox-menu .nm-chatbox-menu__section:hover,
+  .nm-chatbox-menu .nm-chatbox-menu__section:focus-visible,
+  .nm-chatbox-menu .nm-chatbox-menu__section[aria-disabled='true'] {
+    background: transparent;
+    opacity: 1;
+  }
+
+  .nm-chatbox-menu--text .nm-chatbox-menu__copy > span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-chatbox-menu--text .nm-chatbox-menu__hint {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-chatbox-menu .nm-chatbox-menu__icon {
+    display: inline-flex;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    margin: 0;
+    color: var(--nm-fg);
+  }
+
+  .nm-chatbox-menu .nm-chatbox-menu__icon svg,
+  .nm-chatbox-menu .nm-chatbox-menu__icon .nm-icon,
+  .nm-chatbox-menu .nm-chatbox-menu__icon img,
+  .nm-chatbox-menu .nm-chatbox-menu__logo {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    padding: 0;
+    object-fit: contain;
+  }
+
+  .nm-chatbox-menu__anchor {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+  }
+
+  .nm-chatbox__app {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-icon-pad) var(--nm-space-12);
+    border: 0;
+    border-radius: var(--nm-control-radius);
+    background: var(--nm-panel);
+    color: var(--nm-fg-subtle);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-type-ui);
+    cursor: pointer;
+  }
+
+  .nm-chatbox__app .nm-chatbox-menu__logo,
+  .nm-chatbox__app .nm-icon,
+  .nm-chatbox__app img {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    padding: 0;
+    object-fit: contain;
+    background: transparent;
+  }
+
+  .nm-chatbox__chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nm-space-8);
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .nm-chatbox .nm-chatbox__prompt[data-connections='true'] {
+    display: flex;
+    flex-direction: column !important;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: var(--nm-space-24);
+  }
+
+  .nm-chatbox .nm-chatbox__prompt[data-connections='true'] .nm-chatbox__chips,
+  .nm-chatbox .nm-chatbox__prompt[data-connections='true'] .nm-chatbox__prompt-field {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* The field is the placeholder's containing block. Static positioning lets
+     the overlay use the prompt instead, and the prompt includes the chips. */
+  .nm-chatbox .nm-chatbox__prompt[data-connections='true'] .nm-chatbox__prompt-field {
+    position: relative;
+  }
+
+  .nm-chatbox .nm-chatbox__prompt[data-connections='true'] .nm-chatbox__chips {
+    align-self: flex-start;
+    width: auto;
+  }
+
+  .nm-chatbox__prompt-field {
+    position: relative;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .nm-landing-composer--agent .nm-chatbox:not([data-dictating='true']) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--nm-space-24);
+  }
+
+  .nm-landing-composer--agent .nm-chatbox:not([data-dictating='true']) .nm-chatbox__row {
+    display: flex;
+    width: 100%;
+  }
+