kyd-shared-badge 0.3.46 → 0.3.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.46",
+  "version": "0.3.47",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -115,7 +115,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const tabs = useMemo(() => {
     const arr = [
       { key: 'overview', label: 'Overview' },
-      ...(showRoleFit ? [{ key: 'role', label: 'Role Fit & Coaching' }] : []),
+      { key: 'role', label: 'Role Fit & Coaching' },
       { key: 'technical', label: 'KYD Technical' },
       { key: 'risk', label: 'KYD Risk' },
       { key: 'ai', label: 'KYD AI' },
@@ -219,8 +219,9 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const RoleFitSection = () => {
     // Local state for expanding long role descriptions
     const [showFullRoleDescription, setShowFullRoleDescription] = useState(false);
+    const rec = assessmentResult?.recommendations;
 
-    return !showRoleFit ? null : (
+    return (
       <div className={`${wrapperMaxWidth} mx-auto`}>
         <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
           <div className="space-y-10">
@@ -289,6 +290,25 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                 <UseCases useCases={assessmentResult?.enterprise_use_cases} headless={isHeadless} badgeId={badgeId} />
               </div>
             )}
+            <div>
+              <Reveal headless={isHeadless} as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Recommendations</Reveal>
+              <Reveal headless={isHeadless}>
+                <div className={'space-y-3'}>
+                  {rec?.summary ? (
+                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{rec.summary}</div>
+                  ) : null}
+                  {Array.isArray(rec?.bullet_points) && (rec?.bullet_points?.length || 0) > 0 ? (
+                    <ul className={'list-disc pl-5 text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                      {rec?.bullet_points?.map((bp, idx) => (
+                        <li key={idx}>{bp}</li>
+                      ))}
+                    </ul>
+                  ) : (!rec?.summary ? (
+                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>No recommendations available.</div>
+                  ) : null)}
+                </div>
+              </Reveal>
+            </div>
           </div>
         </div>
       </div>
@@ -492,7 +512,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             </style>
             {/* Long-form original layout retained for headless/print */}
             {OverviewSection()}
-            {showRoleFit ? <RoleFitSection /> : null}
+            <RoleFitSection />
             {TechnicalSection()}
             {RiskSection()}
             {AiSection()}