@humaan/payload-plugin-ai-assistant 0.0.0-stage → 0.1.1

package/dist/admin/AiAssistantPanel.module.scss

@@ -0,0 +1,689 @@
+// Side panel shell. It sits above the page, not over it, so the editor can keep working on the left.
+.panel {
+  position: fixed;
+  inset-block: 0;
+  right: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  // Payload sets a 13px root, so the width comes from its spacing unit (20px) rather than rem.
+  width: min(calc(var(--base) * 24), 100vw);
+  border-inline-start: 1px solid var(--theme-elevation-150);
+  background: var(--theme-bg);
+  box-shadow: -8px 0 24px rgb(0 0 0 / 12%);
+  font-size: 0.875rem;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.5);
+    padding: calc(var(--base) * 0.75) calc(var(--base) * 1);
+    border-bottom: 1px solid var(--theme-elevation-100);
+  }
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  &__usage {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: calc(var(--base) * 0.25);
+  }
+
+  &__iconButton {
+    display: inline-grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--style-radius-s, 4px);
+    background: transparent;
+    color: var(--theme-elevation-800);
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-success-500);
+      outline-offset: 1px;
+    }
+  }
+}
+
+.assistant {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  &__bar {
+    display: flex;
+    align-items: stretch;
+    gap: calc(var(--base) * 0.5);
+    padding: calc(var(--base) * 0.5) calc(var(--base) * 1);
+    border-bottom: 1px solid var(--theme-elevation-100);
+  }
+
+  // The native arrow ignores padding, so it is replaced with a drawn chevron that keeps clear of the text.
+  &__selectWrap {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0.875rem;
+      width: 0.4375rem;
+      height: 0.4375rem;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      color: var(--theme-elevation-600);
+      transform: translateY(-70%) rotate(45deg);
+      pointer-events: none;
+    }
+  }
+
+  &__select,
+  &__barButton {
+    height: 2.25rem;
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: var(--style-radius-s, 4px);
+    color: var(--theme-text);
+    font: inherit;
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-success-500);
+      outline-offset: 1px;
+    }
+  }
+
+  &__select {
+    width: 100%;
+    padding: 0 2.25rem 0 calc(var(--base) * 0.5);
+    overflow: hidden;
+    background: var(--theme-input-bg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  &__barButton {
+    flex-shrink: 0;
+    padding: 0 calc(var(--base) * 0.625);
+    background: var(--theme-elevation-50);
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__chat {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  &__log {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: calc(var(--base) * 1.25);
+    min-height: 0;
+    overflow-y: auto;
+    padding: calc(var(--base) * 1);
+    overscroll-behavior: contain;
+  }
+
+  &__welcome {
+    color: var(--theme-elevation-600);
+
+    p {
+      margin: 0 0 calc(var(--base) * 0.5);
+    }
+  }
+
+  &__user {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: calc(var(--base) * 0.25);
+    align-self: flex-end;
+    max-width: 85%;
+
+    .assistant__text {
+      padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+      border-radius: calc(var(--base) * 0.75) calc(var(--base) * 0.75) calc(var(--base) * 0.25);
+      background: var(--theme-elevation-100);
+      line-height: 1.5;
+    }
+  }
+
+  &__reply {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.5);
+    max-width: 100%;
+  }
+
+  &__text {
+    margin: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+
+  &__markdown {
+    max-width: 65ch;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    p,
+    ul,
+    ol,
+    pre {
+      margin: 0 0 calc(var(--base) * 0.75);
+    }
+
+    ul,
+    ol {
+      padding-inline-start: calc(var(--base) * 1.25);
+    }
+
+    li + li {
+      margin-top: calc(var(--base) * 0.125);
+    }
+
+    code {
+      padding: 0.0625rem 0.25rem;
+      border-radius: var(--style-radius-s, 4px);
+      background: var(--theme-elevation-100);
+      font-size: 0.875em;
+    }
+
+    pre {
+      overflow-x: auto;
+      padding: calc(var(--base) * 0.5);
+      border-radius: var(--style-radius-s, 4px);
+      background: var(--theme-elevation-100);
+
+      code {
+        padding: 0;
+        background: none;
+      }
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    th,
+    td {
+      padding: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
+      border: 1px solid var(--theme-elevation-150);
+      text-align: start;
+      vertical-align: top;
+    }
+  }
+
+  &__markdownHeading {
+    margin-top: calc(var(--base) * 0.75);
+  }
+
+  &__markdownTable {
+    overflow-x: auto;
+    margin-bottom: calc(var(--base) * 0.5);
+
+    table {
+      border-collapse: collapse;
+      font-size: 0.875rem;
+    }
+  }
+
+  &__thinking {
+    margin: 0;
+    color: var(--theme-elevation-600);
+  }
+
+  &__steps {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.125);
+    margin: 0;
+    padding: 0;
+    color: var(--theme-elevation-600);
+    font-size: 0.8125rem;
+    list-style: none;
+  }
+
+  &__stepsFold {
+    color: var(--theme-elevation-600);
+    font-size: 0.8125rem;
+
+    summary {
+      width: fit-content;
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: 2px solid var(--theme-success-500);
+        outline-offset: 2px;
+      }
+    }
+
+    .assistant__steps {
+      margin-top: calc(var(--base) * 0.375);
+      padding-inline-start: calc(var(--base) * 0.75);
+      border-inline-start: 2px solid var(--theme-elevation-150);
+    }
+  }
+
+  &__step {
+    display: flex;
+    gap: calc(var(--base) * 0.375);
+
+    &[data-state='failed'] {
+      color: var(--theme-error-500);
+    }
+  }
+
+  &__plan {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.5);
+    padding: calc(var(--base) * 0.75);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: var(--style-radius-m, 6px);
+    background: var(--theme-elevation-50);
+
+    &[data-status='applied'] {
+      border-color: var(--theme-success-500);
+    }
+
+    &[data-status='cancelled'] {
+      opacity: 0.75;
+    }
+  }
+
+  &__planHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--base) * 0.5);
+  }
+
+  &__planTitle {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  &__ops {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__op {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.25);
+    padding-block-start: calc(var(--base) * 0.5);
+    border-top: 1px solid var(--theme-elevation-150);
+  }
+
+  &__opHeader {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.25);
+  }
+
+  &__opLabel {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  &__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.25);
+    padding: 0.0625rem calc(var(--base) * 0.375);
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.5;
+    white-space: nowrap;
+
+    &[data-tone='success'] {
+      background: var(--theme-success-100);
+      color: var(--theme-success-800);
+    }
+
+    &[data-tone='warning'] {
+      background: var(--theme-warning-100);
+      color: var(--theme-warning-800);
+    }
+
+    // Payload has no theme-aware blue, so dark mode swaps the steps itself.
+    &[data-tone='info'] {
+      background: var(--color-blue-100);
+      color: var(--color-blue-800);
+
+      :global(html[data-theme='dark']) & {
+        background: var(--color-blue-800);
+        color: var(--color-blue-100);
+      }
+    }
+
+    &-dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background: hsl(var(--pill-hue, 0) 65% 50%);
+    }
+  }
+
+  &__diff {
+    summary {
+      cursor: pointer;
+      font-size: 0.8125rem;
+      font-weight: 600;
+
+      &:focus-visible {
+        outline: 2px solid var(--theme-success-500);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  &__diffList {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.5);
+    margin: calc(var(--base) * 0.5) 0 0;
+  }
+
+  &__diffItem {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.25);
+  }
+
+  &__diffPath {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--base) * 0.25);
+    font-size: 0.8125rem;
+  }
+
+  &__diffValue {
+    margin: 0;
+    padding: calc(var(--base) * 0.375) calc(var(--base) * 0.5);
+    border-inline-start: 3px solid var(--theme-elevation-250);
+    border-radius: var(--style-radius-s, 4px);
+    background: var(--theme-elevation-100);
+    font-size: 0.8125rem;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+
+    &[data-side='before'] {
+      color: var(--theme-elevation-600);
+    }
+
+    &[data-side='after'] {
+      border-inline-start-color: var(--theme-success-500);
+    }
+  }
+
+  &__diffLabel {
+    display: block;
+    margin-bottom: 0.125rem;
+    color: var(--theme-elevation-600);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  &__list {
+    margin: 0;
+    padding-inline-start: calc(var(--base) * 1);
+  }
+
+  &__progress {
+    position: relative;
+    height: 2px;
+    overflow: hidden;
+    background: var(--theme-elevation-100);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      width: 30%;
+      background: var(--theme-success-500);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      &::after {
+        animation: assistant-progress 1.2s ease-in-out infinite;
+      }
+    }
+  }
+
+  &__composer {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.5);
+    padding: calc(var(--base) * 0.75) calc(var(--base) * 1);
+    border-top: 1px solid var(--theme-elevation-100);
+    background: var(--theme-bg);
+  }
+
+  &__context {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.375);
+    margin: 0;
+    color: var(--theme-elevation-600);
+    font-size: 0.8125rem;
+  }
+
+  &__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.25);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.25);
+    max-width: 100%;
+    padding: 0.125rem calc(var(--base) * 0.375);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 999px;
+    font-size: 0.8125rem;
+  }
+
+  &__chip[data-status='failed'] {
+    border-color: var(--theme-error-500);
+  }
+
+  &__chipStatus {
+    color: var(--theme-elevation-600);
+    font-size: 0.75rem;
+
+    .assistant__chip[data-status='failed'] & {
+      color: var(--theme-error-500);
+    }
+  }
+
+  &__chipName {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__chipRemove {
+    display: inline-grid;
+    place-items: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-success-500);
+      outline-offset: 1px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__textarea {
+    width: 100%;
+    min-height: 4.5rem;
+    padding: calc(var(--base) * 0.5);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: var(--style-radius-m, 6px);
+    background: var(--theme-input-bg);
+    color: var(--theme-text);
+    font: inherit;
+    resize: vertical;
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-success-500);
+      outline-offset: 2px;
+    }
+  }
+
+  &__composerRow {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: calc(var(--base) * 0.5);
+  }
+
+  &__composerActions,
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.5);
+  }
+
+  &__composerActions {
+    margin-inline-start: auto;
+  }
+
+  &__hint,
+  &__meta {
+    margin: 0;
+    color: var(--theme-elevation-600);
+    font-size: 0.8125rem;
+  }
+
+  &__hint {
+    flex: 1 1 16rem;
+  }
+
+  &__notice {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: calc(var(--base) * 0.375);
+    padding: calc(var(--base) * 0.5);
+    border-radius: var(--style-radius-s, 4px);
+    background: var(--theme-warning-100);
+  }
+
+  &__media {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) * 0.5);
+  }
+
+  &__mediaThumb {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--style-radius-s, 4px);
+    background: var(--theme-elevation-150);
+    object-fit: cover;
+  }
+
+  &__error {
+    margin: 0 calc(var(--base) * 1);
+    color: var(--theme-error-500);
+  }
+
+  &__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+@keyframes assistant-progress {
+  from {
+    left: -30%;
+  }
+
+  to {
+    left: 100%;
+  }
+}

package/dist/admin/AiSourceSwitch.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+interface AiSourceSwitchProps {
+    /** Shown for Humaan AI, and whenever the own key cannot be chosen. */
+    humaanAi: ReactNode;
+    /** Shown when AI Source is set to the own key. Missing when the own key's credentials are incomplete. */
+    ownKey?: ReactNode;
+}
+/**
+ * Shows the view that matches AI Source as it stands in the form, saved or not, so changing the choice updates the
+ * settings screen straight away. Both views are rendered on the server; this only picks one.
+ */
+export declare function AiSourceSwitch({ humaanAi, ownKey }: AiSourceSwitchProps): import("react").JSX.Element;
+export {};

package/dist/admin/AiSourceSwitch.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFormFields } from '@payloadcms/ui';
+/**
+ * Shows the view that matches AI Source as it stands in the form, saved or not, so changing the choice updates the
+ * settings screen straight away. Both views are rendered on the server; this only picks one.
+ */ export function AiSourceSwitch({ humaanAi, ownKey }) {
+    const source = useFormFields(([fields])=>fields.billing?.value);
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: source === 'own-key' && ownKey ? ownKey : humaanAi
+    });
+}
+
+//# sourceMappingURL=AiSourceSwitch.js.map

package/dist/admin/AiSourceSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/AiSourceSwitch.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\n\nimport { useFormFields } from '@payloadcms/ui'\n\ninterface AiSourceSwitchProps {\n  /** Shown for Humaan AI, and whenever the own key cannot be chosen. */\n  humaanAi: ReactNode\n  /** Shown when AI Source is set to the own key. Missing when the own key's credentials are incomplete. */\n  ownKey?: ReactNode\n}\n\n/**\n * Shows the view that matches AI Source as it stands in the form, saved or not, so changing the choice updates the\n * settings screen straight away. Both views are rendered on the server; this only picks one.\n */\nexport function AiSourceSwitch({ humaanAi, ownKey }: AiSourceSwitchProps) {\n  const source = useFormFields(([fields]) => fields.billing?.value)\n  return <>{source === 'own-key' && ownKey ? ownKey : humaanAi}</>\n}\n"],"names":["useFormFields","AiSourceSwitch","humaanAi","ownKey","source","fields","billing","value"],"mappings":"AAAA;;AAIA,SAASA,aAAa,QAAQ,iBAAgB;AAS9C;;;CAGC,GACD,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAEC,MAAM,EAAuB;IACtE,MAAMC,SAASJ,cAAc,CAAC,CAACK,OAAO,GAAKA,OAAOC,OAAO,EAAEC;IAC3D,qBAAO;kBAAGH,WAAW,aAAaD,SAASA,SAASD;;AACtD"}

package/dist/admin/BudgetField.d.ts

@@ -0,0 +1,8 @@
+import type { UIFieldServerProps } from 'payload';
+/**
+ * What the model costs, on the settings screen, for AI Source as it stands in the form. On Humaan AI: how much of the
+ * project's budget is used, as shares only. On the own key: the site's spend on it, which is the client's own money,
+ * so it is shown in US dollars. Both are rendered here, on the server, so no token or key reaches the browser, and
+ * `AiSourceSwitch` shows the one that matches. The settings global is admin-only, and so is this screen.
+ */
+export declare function BudgetField({ payload, req }: UIFieldServerProps): Promise<import("react").JSX.Element>;