@ansiversa/components 0.0.127 → 0.0.129

package/index.ts

@@ -38,6 +38,7 @@ export { default as FlashNoteSummary } from './src/Summary/FlashNoteSummary.astr
 export { default as ResumeBuilderSummary } from './src/Summary/ResumeBuilderSummary.astro';
 export { default as PortfolioCreatorSummary } from './src/Summary/PortfolioCreatorSummary.astro';
 export { default as AvImageUploader } from "./src/components/media/AvImageUploader.astro";
+export { default as AvAiAssist } from "./src/components/Ai/AvAiAssist.astro";
 export { default as ResumeBuilderShell } from './src/resume-templates/ResumeBuilderShell.astro';
 export { default as ResumeTemplateClassic } from './src/resume-templates/ResumeTemplateClassic.astro';
 export { default as ResumeTemplateModernTwoTone } from './src/resume-templates/ResumeTemplateModernTwoTone.astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.127",
+  "version": "0.0.129",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/components/Ai/AvAiAssist.astro

@@ -0,0 +1,315 @@
+---
+interface Props {
+  featureKey: string;
+  value: string;
+  valueSourceSelector?: string;
+  minChars?: number;
+  maxChars?: number;
+  label?: string;
+  onAppendEvent?: string;
+  onReplaceEvent?: string;
+  [key: string]: any;
+}
+
+const {
+  featureKey,
+  value,
+  valueSourceSelector,
+  minChars = 30,
+  maxChars = 1500,
+  label = "AI",
+  onAppendEvent = "av:ai-append",
+  onReplaceEvent = "av:ai-replace",
+  ...rest
+} = Astro.props as Props;
+
+const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
+---
+
+<div
+  class="av-ai-assist"
+  data-av-ai-assist={componentId}
+  data-value={value}
+  {...rest}
+  x-data={`avAiAssist(${JSON.stringify({
+    featureKey,
+    valueSourceSelector: valueSourceSelector ?? null,
+    minChars,
+    maxChars,
+    label,
+    onAppendEvent,
+    onReplaceEvent,
+  })})`}
+  x-init="init()"
+>
+  <span class="av-ai-assist-trigger" :title="disabledReason || `Get ${label} suggestions`">
+    <button
+      type="button"
+      class="av-btn-ghost av-btn-sm av-ai-assist-btn"
+      @click.prevent="openModal()"
+      :disabled="!canFetch"
+      aria-label="Get AI suggestions"
+    >
+      <span aria-hidden="true">✨</span>
+      <span x-text="label"></span>
+    </button>
+  </span>
+
+  <template x-if="open">
+    <div class="av-ai-assist-overlay" @click.self="closeModal()" @keydown.escape.window="closeModal()">
+      <div class="av-ai-assist-modal" role="dialog" aria-modal="true" aria-label="AI suggestions">
+        <div class="av-auth-stack-sm">
+          <div class="av-row-between">
+            <h3 class="av-card-heading av-m-0">AI Suggestions</h3>
+            <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="closeModal()">Close</button>
+          </div>
+
+          <template x-if="loading">
+            <p class="av-text-soft av-m-0">Generating suggestions...</p>
+          </template>
+
+          <template x-if="error && !loading">
+            <div class="av-alert av-alert-danger" role="status" x-text="error"></div>
+          </template>
+
+          <template x-if="!loading && suggestions.length">
+            <div class="av-auth-stack-xs">
+              <template x-for="(suggestion, index) in suggestions" :key="`assist-${index}`">
+                <div class="av-ai-assist-suggestion">
+                  <p class="av-m-0" x-text="suggestion"></p>
+                  <div class="av-row-wrap">
+                    <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="appendSuggestion(suggestion)">Append</button>
+                    <button type="button" class="av-btn-primary av-btn-sm" @click.prevent="replaceSuggestion(suggestion)">Replace</button>
+                    <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="copySuggestion(suggestion, index)">
+                      <span x-text="copiedIndex === index ? 'Copied' : 'Copy'"></span>
+                    </button>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <p class="av-form-hint av-m-0">AI suggestions are optional. Please review before saving.</p>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>
+
+<script is:inline>
+  if (typeof window !== "undefined" && !window.avAiAssist) {
+    window.avAiAssist = (config) => ({
+      featureKey: config.featureKey,
+      valueSourceSelector:
+        typeof config.valueSourceSelector === "string" && config.valueSourceSelector.trim()
+          ? config.valueSourceSelector.trim()
+          : null,
+      minChars: Number(config.minChars ?? 30),
+      maxChars: Number(config.maxChars ?? 1500),
+      label: typeof config.label === "string" && config.label ? config.label : "AI",
+      onAppendEvent: typeof config.onAppendEvent === "string" && config.onAppendEvent ? config.onAppendEvent : "av:ai-append",
+      onReplaceEvent: typeof config.onReplaceEvent === "string" && config.onReplaceEvent ? config.onReplaceEvent : "av:ai-replace",
+      value: "",
+      open: false,
+      loading: false,
+      error: null,
+      suggestions: [],
+      copiedIndex: null,
+      observer: null,
+      sourceElement: null,
+
+      init() {
+        if (this.valueSourceSelector) {
+          this.sourceElement = document.querySelector(this.valueSourceSelector);
+          if (this.sourceElement) {
+            this.sourceElement.addEventListener("input", () => this.syncValue());
+            this.sourceElement.addEventListener("change", () => this.syncValue());
+          }
+        }
+
+        this.syncValue();
+
+        if (typeof MutationObserver !== "undefined") {
+          this.observer = new MutationObserver(() => this.syncValue());
+          this.observer.observe(this.$el, { attributes: true, attributeFilter: ["data-value"] });
+        }
+      },
+
+      get textValue() {
+        const raw = typeof this.value === "string" ? this.value : "";
+        return raw.trim();
+      },
+
+      get canFetch() {
+        return !this.loading && !this.disabledReason;
+      },
+
+      get disabledReason() {
+        if (this.loading) return "Generating suggestions...";
+        if (this.textValue.length > this.maxChars) return `Text exceeds ${this.maxChars} characters.`;
+        if (this.textValue.length < this.minChars) return `Add at least ${this.minChars} characters to get meaningful suggestions.`;
+        return "";
+      },
+
+      syncValue() {
+        if (this.sourceElement && typeof this.sourceElement.value === "string") {
+          this.value = this.sourceElement.value;
+          return;
+        }
+
+        const nextValue = this.$el.getAttribute("data-value") ?? "";
+        this.value = String(nextValue);
+      },
+
+      closeModal() {
+        this.open = false;
+        this.loading = false;
+        this.error = null;
+        this.suggestions = [];
+        this.copiedIndex = null;
+      },
+
+      mapError(status, payload) {
+        if (status === 401) return "Please sign in again.";
+        if (status === 429) return "Too many requests. Try again in a few minutes.";
+        if (status === 400) {
+          if (payload && typeof payload.error === "string" && payload.error.trim()) {
+            return payload.error.trim();
+          }
+          return "Invalid request.";
+        }
+        return "Something went wrong. Please try again.";
+      },
+
+      async openModal() {
+        this.syncValue();
+        if (!this.canFetch) return;
+
+        this.open = true;
+        this.loading = true;
+        this.error = null;
+        this.suggestions = [];
+        this.copiedIndex = null;
+
+        try {
+          const response = await fetch("/api/ai/suggest", {
+            method: "POST",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              featureKey: this.featureKey,
+              userText: this.textValue,
+            }),
+          });
+
+          const text = await response.text();
+          let payload = null;
+
+          if (text) {
+            try {
+              payload = JSON.parse(text);
+            } catch {
+              payload = null;
+            }
+          }
+
+          if (!response.ok) {
+            this.error = this.mapError(response.status, payload);
+            return;
+          }
+
+          const list = Array.isArray(payload?.suggestions)
+            ? payload.suggestions
+                .filter((item) => typeof item === "string")
+                .map((item) => item.trim())
+                .filter(Boolean)
+            : [];
+
+          this.suggestions = list.slice(0, 5);
+          if (!this.suggestions.length) {
+            this.error = "No suggestions returned.";
+          }
+        } catch {
+          this.error = "Something went wrong. Please try again.";
+        } finally {
+          this.loading = false;
+        }
+      },
+
+      appendSuggestion(text) {
+        const value = String(text ?? "").trim();
+        if (!value) return;
+        window.dispatchEvent(new CustomEvent(this.onAppendEvent, { detail: { text: value } }));
+        this.closeModal();
+      },
+
+      replaceSuggestion(text) {
+        const value = String(text ?? "").trim();
+        if (!value) return;
+        window.dispatchEvent(new CustomEvent(this.onReplaceEvent, { detail: { text: value } }));
+        this.closeModal();
+      },
+
+      async copySuggestion(text, index) {
+        const value = String(text ?? "").trim();
+        if (!value) return;
+
+        try {
+          if (!navigator?.clipboard?.writeText) {
+            throw new Error("Clipboard unavailable");
+          }
+
+          await navigator.clipboard.writeText(value);
+          this.copiedIndex = index;
+          window.setTimeout(() => {
+            if (this.copiedIndex === index) this.copiedIndex = null;
+          }, 1200);
+        } catch {
+          this.error = "Copy failed. Please copy manually.";
+        }
+      },
+    });
+  }
+</script>
+
+<style>
+  .av-ai-assist-trigger {
+    display: inline-flex;
+  }
+
+  .av-ai-assist-btn[disabled] {
+    cursor: not-allowed;
+  }
+
+  .av-ai-assist-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    background: rgba(2, 6, 23, 0.72);
+  }
+
+  .av-ai-assist-modal {
+    width: min(720px, 100%);
+    max-height: min(80vh, 720px);
+    overflow: auto;
+    border-radius: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: var(--av-surface, #070f23);
+    padding: 1rem;
+  }
+
+  .av-ai-assist-suggestion {
+    display: grid;
+    gap: 0.75rem;
+    border-radius: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--av-surface-soft, rgba(255, 255, 255, 0.04));
+    padding: 0.75rem;
+  }
+</style>