@oddkin/ai 0.0.0-stage → 1.0.0-beta.0

package/dist/prod/question/question.js

@@ -0,0 +1,120 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { announceEvent, questionAnswerEvent, questionSkipEvent } from "../events.js";
+import { FocusRecovery } from "@oddkin/core/controllers/focus";
+import { format, formatTime, langOf, strings } from "../internal/strings.js";
+const QUESTION_STRINGS = {
+  other: "Other",
+  otherLabel: "Your answer",
+  submit: "Answer",
+  skip: "Skip",
+  submitting: "Sending your answer\u2026",
+  submitted: "Answered.",
+  skipped: "Skipped.",
+  expired: "This question expired; answers are no longer accepted.",
+  failed: "Your answer was not sent: {message}",
+  required: "Choose an option or enter an answer.",
+  expires: "Answer by {time}",
+  yes: "Yes",
+  announceAsked: "Question: {prompt}"
+};
+class OddkinQuestion extends OddkinElement.with({
+  question: prop.object({ description: "The question record." }),
+  announce: prop.enum(["none", "important"], {
+    default: "none",
+    empty: "important",
+    description: "Announce new questions (when no surrounding surface does)."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = {
+    "odd-question-answer": questionAnswerEvent,
+    "odd-question-skip": questionSkipEvent,
+    "odd-announce": announceEvent
+  };
+  /** @internal `questionId:revision` requested from this view. */
+  _requested = signal(void 0);
+  /** @internal Validation message for choice questions. */
+  _invalid = signal("");
+  /** @internal */
+  get _strings() {
+    return strings(QUESTION_STRINGS, this.strings);
+  }
+  /** @internal */
+  _expires() {
+    const time = formatTime(this.question?.expiresAt, langOf(this));
+    return time ? format(this._strings.expires, { time }) : void 0;
+  }
+  /** @internal */
+  get _locked() {
+    const q = this.question;
+    return !q || q.status !== "requested" && q.status !== "failed" ? !0 : this._requested.value === `${q.questionId}:${q.revision}`;
+  }
+  /** @internal */
+  _submit = (event) => {
+    event.preventDefault();
+    const q = this.question, form = this.shadowRoot?.querySelector("form");
+    if (!q || !form || this._locked || !form.reportValidity())
+      return;
+    const answer = this.#answer(q, new FormData(form));
+    if (answer === void 0) {
+      this._invalid.value = this._strings.required;
+      return;
+    }
+    this._invalid.value = "", this._requested.value = `${q.questionId}:${q.revision}`, this.emit(questionAnswerEvent, { questionId: q.questionId, revision: q.revision, answer });
+  };
+  /** @internal */
+  _skip = () => {
+    const q = this.question;
+    !q || this._locked || (this._requested.value = `${q.questionId}:${q.revision}`, this.emit(questionSkipEvent, { questionId: q.questionId, revision: q.revision }));
+  };
+  #answer(q, data) {
+    const custom = String(data.get("custom") ?? "").trim();
+    switch (q.kind) {
+      case "choice": {
+        const choice = data.get("choice");
+        return choice === "__other" ? custom ? { custom } : void 0 : choice ? { choice: String(choice) } : void 0;
+      }
+      case "multi-choice": {
+        const choices = data.getAll("choice").map(String).filter((c) => c !== "__other");
+        return data.getAll("choice").includes("__other") && custom ? { choices, custom } : choices.length ? { choices } : void 0;
+      }
+      case "text": {
+        const text = String(data.get("text") ?? "").trim();
+        return text ? { text } : void 0;
+      }
+      case "form": {
+        const fields = {};
+        for (const field of q.fields ?? []) {
+          const raw = data.get(field.id);
+          field.type === "boolean" ? fields[field.id] = raw === "on" : field.type === "number" ? raw !== null && raw !== "" && (fields[field.id] = Number(raw)) : raw !== null && raw !== "" && (fields[field.id] = String(raw));
+        }
+        return { fields };
+      }
+    }
+  }
+  mounted(scope) {
+    scope.use(new FocusRecovery({
+      root: () => this.shadowRoot,
+      fallback: () => this.shadowRoot?.querySelector(".state")
+    }));
+    let seen;
+    scope.effect(() => {
+      const q = this.question;
+      if (!q)
+        return;
+      const key = `${q.questionId}:${q.revision}`, requested = this._requested.peek();
+      requested && (requested !== key || q.status === "failed") && (this._requested.value = void 0), this.announce !== "none" && seen !== key && q.status === "requested" && this.emit(announceEvent, {
+        text: format(this._strings.announceAsked, { prompt: q.prompt }),
+        priority: "polite",
+        key: `question:${key}`
+      }), seen = key;
+    }, { phase: "post", name: "<odd-question> status" });
+  }
+}
+export {
+  OddkinQuestion,
+  QUESTION_STRINGS
+};

package/dist/prod/question/question.recipe.js

@@ -0,0 +1,14 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const questionRecipe = defineLayoutRecipe({
+  name: "question",
+  regions: {
+    form: stack({ gap: token("space.xs") }),
+    options: stack({ gap: token("space.2xs") }),
+    option: row({ gap: token("space.xs") }),
+    field: stack({ gap: token("space.2xs") })
+  }
+});
+export {
+  questionRecipe
+};

package/dist/prod/question/question.recipe.styles.js

@@ -0,0 +1,33 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const questionRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-2xs);
+    min-inline-size: 0;
+  }
+  .option {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-xs);
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-2xs);
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  questionRecipeStyles
+};

package/dist/prod/question/question.styles.js

@@ -0,0 +1,50 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { questionRecipeStyles } from "./question.recipe.styles.js";
+const questionStyles = css`
+  ${questionRecipeStyles}
+  .form {
+    padding: ${token("space.sm")};
+    border: ${token("border.width.default")} solid ${token("color.border.strong")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.raised")};
+  }
+  fieldset {
+    /* Not a grid: WebKit keeps a grid fieldset's legend at its old width after the container shrinks. */
+    display: flex;
+    flex-direction: column;
+    gap: ${token("space.xs")};
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .prompt {
+    padding: 0;
+    font-weight: ${token("font.weight.semibold")};
+  }
+  p {
+    margin: 0;
+  }
+  .option {
+    min-block-size: ${token("target.min")};
+  }
+  :is(input:not([type='radio'], [type='checkbox']), textarea, select) {
+    min-block-size: ${token("target.min")};
+    padding: ${token("space.2xs")} ${token("space.xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("control.radius")};
+    background: ${token("color.surface.default")};
+    color: inherit;
+    font: inherit;
+  }
+  .state {
+    font-size: ${token("font.size.sm")};
+    color: ${token("color.text.secondary")};
+  }
+  .state[data-status='failed'] {
+    color: ${token("color.danger.foreground")};
+  }
+`;
+export {
+  questionStyles
+};

package/dist/prod/question/question.template.js

@@ -0,0 +1,74 @@
+import { html } from "@oddkin/core/template";
+import { format } from "../internal/strings.js";
+const questionTemplate = (host) => {
+  const t = host._strings, q = host.question;
+  if (!q)
+    return html``;
+  const locked = host._locked, pending = q.status === "submitting" || locked && (q.status === "requested" || q.status === "failed"), status = pending ? t.submitting : q.status === "submitted" ? t.submitted : q.status === "skipped" ? t.skipped : q.status === "expired" ? t.expired : q.status === "failed" ? format(t.failed, { message: q.error?.message ?? "" }) : "", choice = q.kind === "choice" || q.kind === "multi-choice", inputType = q.kind === "choice" ? "radio" : "checkbox", expires = host._expires();
+  return html`<form part="form" class="form" @submit=${host._submit} novalidate>
+    <fieldset ?disabled=${locked}>
+      <legend class="prompt">${q.prompt}</legend>
+      <p class="muted" ?hidden=${!expires}>${expires ?? ""}</p>
+      ${choice ? html`<div class="options">
+              ${(q.options ?? []).map((option) => html`<label class="option">
+                    <input type=${inputType} name="choice" .value=${option.id} />
+                    <span
+                      >${option.label}<span class="muted" ?hidden=${!option.description}>
+                        — ${option.description ?? ""}</span
+                      ></span
+                    >
+                  </label>`)}
+              ${q.allowCustom ? html`<label class="option">
+                        <input type=${inputType} name="choice" value="__other" />
+                        <span>${t.other}</span>
+                      </label>
+                      <label class="field"
+                        ><span class="visually-hidden">${t.otherLabel}</span
+                        ><input type="text" name="custom"
+                      /></label>` : null}
+            </div>` : null}
+      ${q.kind === "text" ? html`<label class="field"
+              ><span class="visually-hidden">${t.otherLabel}</span
+              ><textarea name="text" rows="3" required></textarea>
+            </label>` : null}
+      ${q.kind === "form" ? (q.fields ?? []).map((field) => field.type === "boolean" ? html`<label class="option"
+                    ><input type="checkbox" name=${field.id} /><span>${field.label}</span></label
+                  >` : field.type === "select" ? html`<label class="field"
+                      ><span>${field.label}</span>
+                      <select name=${field.id} ?required=${!!field.required}>
+                        <option value=""></option>
+                        ${(field.options ?? []).map((o) => html`<option .value=${o}>${o}</option>`)}
+                      </select></label
+                    >` : html`<label class="field"
+                      ><span>${field.label}</span>
+                      <input
+                        type=${field.type === "number" ? "number" : "text"}
+                        name=${field.id}
+                        ?required=${!!field.required}
+                    /></label>`) : null}
+      <p class="error" role="alert" ?hidden=${!host._invalid.value}>${host._invalid.value}</p>
+    </fieldset>
+    <p class="state" data-status=${q.status} ?hidden=${!status}>${status}</p>
+    <div
+      part="actions"
+      class="actions"
+      ?hidden=${q.status !== "requested" && q.status !== "failed"}
+    >
+      <odd-button
+        type="submit"
+        appearance="primary"
+        size="sm"
+        ?disabled=${locked && !pending}
+        ?loading=${pending}
+        @click=${host._submit}
+        >${t.submit}</odd-button
+      >
+      <odd-button size="sm" appearance="ghost" ?disabled=${locked} @click=${host._skip}
+        >${t.skip}</odd-button
+      >
+    </div>
+  </form>`;
+};
+export {
+  questionTemplate
+};

package/dist/prod/response/index.js

@@ -0,0 +1,11 @@
+import { OddkinResponse, RESPONSE_STRINGS } from "./response.js";
+import { responseTemplate } from "./response.template.js";
+import { responseStyles } from "./response.styles.js";
+import { responseDefinition } from "./response.definition.js";
+export {
+  OddkinResponse,
+  RESPONSE_STRINGS,
+  responseDefinition,
+  responseStyles,
+  responseTemplate
+};

package/dist/prod/response/response.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { responseDefinition } from "./response.definition.js";
+define(responseDefinition);

package/dist/prod/response/response.definition.js

@@ -0,0 +1,16 @@
+import { compose } from "@oddkin/core/element";
+import { citationDefinition } from "../citation/citation.definition.js";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinResponse } from "./response.js";
+import { responseStyles } from "./response.styles.js";
+import { responseTemplate } from "./response.template.js";
+const responseDefinition = compose({
+  name: "odd-response",
+  element: OddkinResponse,
+  template: responseTemplate,
+  styles: [aiBaseStyles, responseStyles],
+  dependencies: { citation: citationDefinition }
+});
+export {
+  responseDefinition
+};

package/dist/prod/response/response.js

@@ -0,0 +1,135 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { announceEvent } from "../events.js";
+import { strings } from "../internal/strings.js";
+import { MarkdownView } from "../markdown/render.js";
+const RESPONSE_STRINGS = {
+  streaming: "Generating\u2026",
+  interrupted: "The connection ended before the response finished. What is shown may be incomplete.",
+  cancelled: "Stopped. The partial response is kept.",
+  failed: "The response failed.",
+  copy: "Copy response",
+  copyCode: "Copy code",
+  copied: "Copied to clipboard.",
+  copyFailed: "Copying failed.",
+  image: "Image"
+};
+class OddkinResponse extends OddkinElement.with({
+  text: prop.string({
+    default: "",
+    attribute: !1,
+    description: "Canonical Markdown source (property only)."
+  }),
+  status: prop.enum(["streaming", "complete", "interrupted", "cancelled", "failed"], {
+    default: "complete",
+    reflect: !0,
+    description: "Lifecycle of the text."
+  }),
+  error: prop.object({ description: "Error shown when `status` is failed." }),
+  sources: prop.array({
+    description: "Sources that `[^id]` citations resolve against."
+  }),
+  markdown: prop.object({
+    description: "Renderer options: URL policy, sanitizer, highlighter, images."
+  }),
+  copyable: prop.boolean({ description: "Show a copy action for the whole response." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = { "odd-announce": announceEvent };
+  /** @internal Bumps when rendered output changes (for tests and hosts measuring work). */
+  _renders = signal(0);
+  #view;
+  #frame;
+  #citations = /* @__PURE__ */ new Map();
+  /** @internal */
+  get _strings() {
+    return strings(RESPONSE_STRINGS, this.strings);
+  }
+  /** The canonical source currently rendered. */
+  get renderedSource() {
+    return this.#view?.source ?? "";
+  }
+  /** Copy the canonical source (never the rendered DOM text). */
+  async copy(text = this.text) {
+    try {
+      return await navigator.clipboard.writeText(text), this.emit(announceEvent, {
+        text: this._strings.copied,
+        priority: "polite",
+        key: `copy:${Date.now()}`
+      }), !0;
+    } catch {
+      return this.emit(announceEvent, {
+        text: this._strings.copyFailed,
+        priority: "polite",
+        key: `copy-failed:${Date.now()}`
+      }), !1;
+    }
+  }
+  /** @internal */
+  _copy = () => {
+    this.copy();
+  };
+  mounted(scope) {
+    const content = this.shadowRoot?.querySelector('[part="content"]');
+    if (!content)
+      return;
+    this.#citations.clear(), this.#view = new MarkdownView(content, this.#options()), scope.add(() => {
+      this.#frame !== void 0 && cancelAnimationFrame(this.#frame), this.#frame = void 0, this.#view?.dispose(), this.#view = void 0;
+    }, "markdown view");
+    let first = !0;
+    scope.effect(() => {
+      const options = this.markdown;
+      if (first) {
+        first = !1;
+        return;
+      }
+      this.#citations.clear(), this.#view?.configure(this.#options());
+    }, { phase: "post", name: "<odd-response> options" }), scope.effect(() => {
+      const text = this.text;
+      this.status === "streaming" ? this.#frame === void 0 && (this.#frame = requestAnimationFrame(() => {
+        this.#frame = void 0, this.#render(this.text, this.status === "streaming");
+      })) : (this.#frame !== void 0 && cancelAnimationFrame(this.#frame), this.#frame = void 0, this.#render(text, !1));
+    }, { phase: "post", name: "<odd-response> render" }), scope.effect(() => {
+      const sources = this.sources;
+      for (const [id, elements] of this.#citations) {
+        const index = sources.findIndex((s) => s.sourceId === id);
+        for (const el of elements)
+          el.source = sources[index], el.index = index + 1;
+      }
+    }, { phase: "post", name: "<odd-response> citations" });
+  }
+  #render(text, streaming) {
+    this.#view?.update(text, streaming);
+    for (const [id, elements] of this.#citations) {
+      for (const el of elements)
+        el.isConnected || elements.delete(el);
+      elements.size || this.#citations.delete(id);
+    }
+    this._renders.value = this._renders.peek() + 1;
+  }
+  #options() {
+    const t = this._strings, doc = this.ownerDocument;
+    return {
+      imageLabel: t.image,
+      ...this.markdown,
+      citation: (id) => {
+        const el = doc.createElement("odd-citation"), index = this.sources.findIndex((s) => s.sourceId === id);
+        el.sourceId = id, el.source = this.sources[index], el.index = index + 1;
+        let set = this.#citations.get(id);
+        return set || this.#citations.set(id, set = /* @__PURE__ */ new Set()), set.add(el), el;
+      },
+      codeActions: (code) => {
+        const button = doc.createElement("button");
+        return button.type = "button", button.className = "text-button copy-code", button.textContent = t.copyCode, button.addEventListener("click", () => {
+          this.copy(code);
+        }), button;
+      }
+    };
+  }
+}
+export {
+  OddkinResponse,
+  RESPONSE_STRINGS
+};

package/dist/prod/response/response.styles.js

@@ -0,0 +1,140 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+const responseStyles = css`
+  .content > :first-child {
+    margin-block-start: 0;
+  }
+  .content > :last-child {
+    margin-block-end: 0;
+  }
+  .content :is(p, ul, ol, blockquote, .code-block, .table-scroll, hr) {
+    margin-block: 0 ${token("space.sm")};
+  }
+  .content :is(h2, h3, h4, h5, h6) {
+    margin-block: ${token("space.md")} ${token("space.xs")};
+    line-height: ${token("line-height.tight")};
+  }
+  .content h3 {
+    font-size: ${token("font.size.lg")};
+  }
+  .content :is(h4, h5, h6) {
+    font-size: ${token("font.size.md")};
+  }
+  .content :is(ul, ol) {
+    padding-inline-start: ${token("space.lg")};
+  }
+  .content blockquote {
+    margin-inline: 0;
+    padding-inline-start: ${token("space.sm")};
+    border-inline-start: ${token("border.width.strong")} solid ${token("color.border.strong")};
+    color: ${token("color.text.secondary")};
+  }
+  .content a {
+    color: ${token("color.link")};
+  }
+  .content .unsafe-link {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+  }
+  .content code {
+    font-family: ${token("font.family.mono")};
+    font-size: 0.9em;
+  }
+  .content :not(pre) > code {
+    padding-inline: 0.25em;
+    border-radius: ${token("radius.sm")};
+    background: ${token("color.surface.sunken")};
+  }
+  .code-block {
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.md")};
+    background: var(--odd-response-code-background, ${token("color.surface.sunken")});
+  }
+  .code-block pre {
+    margin: 0;
+    padding: ${token("space.sm")};
+    overflow-x: auto;
+    white-space: pre;
+  }
+  .code-block .copy-code {
+    margin: 0 ${token("space.2xs")} ${token("space.2xs")};
+  }
+  .tok-keyword {
+    color: ${token("color.link")};
+    font-weight: ${token("font.weight.semibold")};
+  }
+  .tok-string {
+    color: ${token("color.success.foreground")};
+  }
+  .tok-comment {
+    color: ${token("color.text.secondary")};
+    font-style: italic;
+  }
+  .tok-number {
+    color: ${token("color.danger.foreground")};
+  }
+  .table-scroll {
+    overflow-x: auto;
+  }
+  .content table {
+    border-collapse: collapse;
+    font-size: ${token("font.size.sm")};
+  }
+  .content :is(th, td) {
+    padding: ${token("space.2xs")} ${token("space.xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    text-align: start;
+    vertical-align: top;
+  }
+  .content [data-align='center'] {
+    text-align: center;
+  }
+  .content [data-align='right'] {
+    text-align: end;
+  }
+  .content .raw-html {
+    font-family: ${token("font.family.mono")};
+    font-size: ${token("font.size.sm")};
+    white-space: pre-wrap;
+  }
+  .status-line {
+    margin: ${token("space.xs")} 0 0;
+    color: ${token("color.text.secondary")};
+    font-size: ${token("font.size.sm")};
+  }
+  .status-line[data-status='failed'] {
+    color: ${token("color.danger.foreground")};
+  }
+  .status-line[data-status='streaming']::before {
+    content: '';
+    display: inline-block;
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    margin-inline-end: ${token("space.2xs")};
+    border-radius: ${token("radius.full")};
+    background: currentColor;
+    animation: odd-response-pulse 1.2s ease-in-out infinite;
+  }
+  @keyframes odd-response-pulse {
+    50% {
+      opacity: 0.3;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .status-line[data-status='streaming']::before {
+      animation: none;
+    }
+  }
+  .actions {
+    margin-block-start: ${token("space.2xs")};
+  }
+  @media (forced-colors: active) {
+    .code-block,
+    .content :is(th, td) {
+      border-color: CanvasText;
+    }
+  }
+`;
+export {
+  responseStyles
+};

package/dist/prod/response/response.template.js

@@ -0,0 +1,12 @@
+import { html } from "@oddkin/core/template";
+const responseTemplate = (host) => {
+  const t = host._strings, status = host.status, message = status === "streaming" ? t.streaming : status === "interrupted" ? t.interrupted : status === "cancelled" ? t.cancelled : status === "failed" ? host.error?.message || t.failed : "";
+  return html`<div part="content" class="content"></div>
+    <p part="status" class="status-line" data-status=${status} ?hidden=${!message}>${message}</p>
+    <div part="actions" class="actions" ?hidden=${!host.copyable || status === "streaming"}>
+      <button class="text-button" type="button" @click=${host._copy}>${t.copy}</button>
+    </div>`;
+};
+export {
+  responseTemplate
+};

package/dist/prod/response-feedback/index.js

@@ -0,0 +1,11 @@
+import { OddkinResponseFeedback, FEEDBACK_STRINGS } from "./response-feedback.js";
+import { responseFeedbackTemplate } from "./response-feedback.template.js";
+import { responseFeedbackStyles } from "./response-feedback.styles.js";
+import { responseFeedbackDefinition } from "./response-feedback.definition.js";
+export {
+  FEEDBACK_STRINGS,
+  OddkinResponseFeedback,
+  responseFeedbackDefinition,
+  responseFeedbackStyles,
+  responseFeedbackTemplate
+};

package/dist/prod/response-feedback/response-feedback.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { responseFeedbackDefinition } from "./response-feedback.definition.js";
+define(responseFeedbackDefinition);

package/dist/prod/response-feedback/response-feedback.definition.js

@@ -0,0 +1,16 @@
+import { buttonDefinition } from "@oddkin/components/button";
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinResponseFeedback } from "./response-feedback.js";
+import { responseFeedbackStyles } from "./response-feedback.styles.js";
+import { responseFeedbackTemplate } from "./response-feedback.template.js";
+const responseFeedbackDefinition = compose({
+  name: "odd-response-feedback",
+  element: OddkinResponseFeedback,
+  template: responseFeedbackTemplate,
+  styles: [aiBaseStyles, responseFeedbackStyles],
+  dependencies: { button: buttonDefinition }
+});
+export {
+  responseFeedbackDefinition
+};