@ansiversa/components 0.0.165 → 0.0.167

package/package.json

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

package/src/components/Ai/AvAiAssist.astro

@@ -1,54 +1,71 @@
 ---
+type AssistMode = "suggestions" | "rewrite";
+
 interface Props {
-  featureKey: string;
-  value: string;
+  mode?: AssistMode;
+  featureKey?: string;
+  value?: string;
+  text?: string;
   valueSourceSelector?: string;
   minChars?: number;
   maxChars?: number;
   label?: string;
+  rewriteField?: "summary" | "generic" | string;
+  gatewayOp?: string;
+  tone?: "professional" | string;
   onAppendEvent?: string;
   onReplaceEvent?: string;
   [key: string]: any;
 }
 
 const {
+  mode = "suggestions",
   featureKey,
   value,
+  text,
   valueSourceSelector,
   minChars = 30,
   maxChars = 1500,
   label = "AI",
+  rewriteField = "generic",
+  gatewayOp = "rewrite",
+  tone = "professional",
   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)}`;
+const initialValue = typeof text === "string" ? text : (value ?? "");
 ---
 
 <div
   class="av-ai-assist"
   data-av-ai-assist={componentId}
-  data-value={value}
+  data-value={initialValue}
   {...rest}
   x-data={`avAiAssist(${JSON.stringify({
-    featureKey,
+    mode,
+    featureKey: featureKey ?? null,
     valueSourceSelector: valueSourceSelector ?? null,
     minChars,
     maxChars,
     label,
+    rewriteField,
+    gatewayOp,
+    tone,
     onAppendEvent,
     onReplaceEvent,
   })})`}
   x-init="init()"
 >
-  <span class="av-ai-assist-trigger" :title="disabledReason || `Get ${label} suggestions`">
+  <span class="av-ai-assist-trigger" :title="disabledReason || buttonTitle">
     <button
       type="button"
       class="av-btn-ghost av-btn-sm av-ai-assist-btn"
       @click.prevent="openModal()"
       :disabled="!canFetch"
-      aria-label="Get AI suggestions"
+      :aria-label="buttonAriaLabel"
     >
       <span aria-hidden="true">✨</span>
       <span x-text="label"></span>
@@ -57,15 +74,15 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
 
   <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-ai-assist-modal" role="dialog" aria-modal="true" :aria-label="modalAriaLabel">
         <div class="av-auth-stack-sm">
           <div class="av-ai-assist-modal-header">
-            <h3 class="av-card-heading av-m-0">AI Suggestions</h3>
+            <h3 class="av-card-heading av-m-0" x-text="modalTitle"></h3>
             <button
               type="button"
               class="av-btn-ghost av-btn-sm av-ai-assist-close"
               @click.prevent="closeModal()"
-              aria-label="Close AI suggestions"
+              :aria-label="closeAriaLabel"
               title="Close"
             >
               <span aria-hidden="true">X</span>
@@ -73,14 +90,24 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
           </div>
 
           <template x-if="loading">
-            <p class="av-text-soft av-m-0">Generating suggestions...</p>
+            <p class="av-text-soft av-m-0" x-text="loadingLabel"></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">
+          <template x-if="isRewriteMode() && !loading && rewrittenText">
+            <div class="av-auth-stack-xs">
+              <textarea class="av-input av-ai-assist-rewrite-output" readonly x-text="rewrittenText"></textarea>
+              <div class="av-row-wrap">
+                <button type="button" class="av-btn-primary av-btn-sm" @click.prevent="replaceSuggestion(rewrittenText)">Replace</button>
+                <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="closeModal()">Close</button>
+              </div>
+            </div>
+          </template>
+
+          <template x-if="!isRewriteMode() && !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">
@@ -97,7 +124,7 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
             </div>
           </template>
 
-          <p class="av-form-hint av-m-0">AI suggestions are optional. Please review before saving.</p>
+          <p class="av-form-hint av-m-0" x-text="footerHint"></p>
         </div>
       </div>
     </div>
@@ -107,7 +134,8 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
 <script is:inline>
   if (typeof window !== "undefined" && !window.avAiAssist) {
     window.avAiAssist = (config) => ({
-      featureKey: config.featureKey,
+      mode: config.mode === "rewrite" ? "rewrite" : "suggestions",
+      featureKey: typeof config.featureKey === "string" ? config.featureKey : null,
       valueSourceSelector:
         typeof config.valueSourceSelector === "string" && config.valueSourceSelector.trim()
           ? config.valueSourceSelector.trim()
@@ -115,6 +143,12 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
       minChars: Number(config.minChars ?? 30),
       maxChars: Number(config.maxChars ?? 1500),
       label: typeof config.label === "string" && config.label ? config.label : "AI",
+      rewriteField:
+        typeof config.rewriteField === "string" && config.rewriteField.trim()
+          ? config.rewriteField.trim()
+          : "generic",
+      gatewayOp: typeof config.gatewayOp === "string" && config.gatewayOp ? config.gatewayOp : "rewrite",
+      tone: typeof config.tone === "string" && config.tone ? config.tone : "professional",
       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: "",
@@ -122,6 +156,7 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
       loading: false,
       error: null,
       suggestions: [],
+      rewrittenText: "",
       copiedIndex: null,
       observer: null,
       sourceElement: null,
@@ -143,6 +178,10 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
         }
       },
 
+      isRewriteMode() {
+        return this.mode === "rewrite";
+      },
+
       get textValue() {
         const raw = typeof this.value === "string" ? this.value : "";
         return raw.trim();
@@ -152,8 +191,42 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
         return !this.loading && !this.disabledReason;
       },
 
+      get buttonTitle() {
+        return this.isRewriteMode() ? "Rewrite with AI" : `Get ${this.label} suggestions`;
+      },
+
+      get buttonAriaLabel() {
+        return this.isRewriteMode() ? "Rewrite with AI" : "Get AI suggestions";
+      },
+
+      get modalTitle() {
+        return this.isRewriteMode() ? "AI Rewrite" : "AI Suggestions";
+      },
+
+      get modalAriaLabel() {
+        return this.isRewriteMode() ? "AI rewrite" : "AI suggestions";
+      },
+
+      get closeAriaLabel() {
+        return this.isRewriteMode() ? "Close AI rewrite" : "Close AI suggestions";
+      },
+
+      get loadingLabel() {
+        return this.isRewriteMode() ? "Rewriting text..." : "Generating suggestions...";
+      },
+
+      get footerHint() {
+        return this.isRewriteMode()
+          ? "AI rewrite is optional. Please review before saving."
+          : "AI suggestions are optional. Please review before saving.";
+      },
+
       get disabledReason() {
-        if (this.loading) return "Generating suggestions...";
+        if (this.loading) return this.loadingLabel;
+        if (this.isRewriteMode()) {
+          if (this.textValue.length === 0) return "Add text to rewrite.";
+          return "";
+        }
         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 "";
@@ -174,6 +247,7 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
         this.loading = false;
         this.error = null;
         this.suggestions = [];
+        this.rewrittenText = "";
         this.copiedIndex = null;
       },
 
@@ -197,19 +271,30 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
         this.loading = true;
         this.error = null;
         this.suggestions = [];
+        this.rewrittenText = "";
         this.copiedIndex = null;
 
         try {
+          const body = this.isRewriteMode()
+            ? {
+                op: this.gatewayOp || "rewrite",
+                text: this.textValue,
+                field: this.rewriteField || "generic",
+                maxChars: Number.isFinite(this.maxChars) ? this.maxChars : undefined,
+                tone: this.tone || "professional",
+              }
+            : {
+                featureKey: this.featureKey,
+                userText: this.textValue,
+              };
+
           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,
-            }),
+            body: JSON.stringify(body),
           });
 
           const text = await response.text();
@@ -228,6 +313,15 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
             return;
           }
 
+          if (this.isRewriteMode()) {
+            const rewritten = typeof payload?.text === "string" ? payload.text.trim() : "";
+            this.rewrittenText = rewritten;
+            if (!this.rewrittenText) {
+              this.error = "No rewrite returned.";
+            }
+            return;
+          }
+
           const list = Array.isArray(payload?.suggestions)
             ? payload.suggestions
                 .filter((item) => typeof item === "string")
@@ -335,4 +429,9 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
     background: var(--av-surface-soft, rgba(255, 255, 255, 0.04));
     padding: 0.75rem;
   }
+
+  .av-ai-assist-rewrite-output {
+    min-height: 10rem;
+    resize: none;
+  }
 </style>

package/src/resume-templates/ResumeTemplateClassic.astro

@@ -151,7 +151,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                   return (
                     <div class="av-print-avoid-break flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                       <div>
-                        {edu.degree ? <h3 class="text-base font-semibold">{edu.degree}</h3> : null}
+                        {edu.degree ? <h3 class="text-base font-semibold text-slate-900">{edu.degree}</h3> : null}
                         <p class="text-sm text-slate-700">{edu.school}</p>
                         {edu.location && (
                           <p class="text-sm text-slate-600">{edu.location}</p>