kyd-shared-badge 0.3.114 → 0.3.117

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -52,7 +52,7 @@ type ChatWidgetProps = Partial<{
 //   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 // };
 
-const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean, selfCheck?: boolean }) => {
+const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false, public: isPublicView = false, suppressChat = false }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean, selfCheck?: boolean, 'public'?: boolean, suppressChat?: boolean }) => {
   const { 
     badgeId, 
     developerName, 
@@ -120,7 +120,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false
       { key: 'technical', label: 'KYD Technical' },
       { key: 'risk', label: 'KYD Risk' },
       // { key: 'ai', label: 'KYD AI' },
-      { key: 'role', label: 'Role Fit & Coaching' },
+      { key: 'role', label: showRoleFit ? 'Role Fit & Coaching' : 'Coaching' },
       { key: 'resume', label: 'Resume' },
       { key: 'appendix', label: 'Appendix' }
     ];
@@ -189,14 +189,20 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false
                 }}
               >
                 {IconComp ? (
-                  <IconComp
-                    width={18}
-                    height={18}
-                    className="text-[var(--text-main)]"
-                    style={{ display: 'inline-block', verticalAlign: 'middle', color: 'var(--text-main)' }}
-                  />
-                ) : null}
-                {t.label}
+                  <>
+                    <span className="block sm:inline">
+                      <IconComp
+                        width={18}
+                        height={18}
+                        className="text-[var(--text-main)]"
+                        style={{ display: 'inline-block', verticalAlign: 'middle', color: 'var(--text-main)' }}
+                      />
+                    </span>
+                    <span className="hidden sm:inline">{t.label}</span>
+                  </>
+                ) : (
+                  t.label
+                )}
               </button>
             );
           })}
@@ -592,6 +598,10 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false
           <div id="appendix-connected">
             <ConnectedPlatforms accounts={connected} authenticity={assessmentResult?.account_authenticity} />
           </div>
+          {/* badge id */}
+          <div className='mt-4 text-sm' style={{ color: 'var(--text-secondary)' }}>
+            <p className="font-medium">Badge ID: {badgeId}</p>
+          </div>
         </div>
       </div>
       <Reveal headless={isHeadless}>
@@ -629,20 +639,24 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false
             {AppendixSection()}
           </>
         ) : (
-          <>
-            <TabNav />
-            <div className={'px-2 sm:px-0 pb-2'}>
-              {activeTab === 'overview' && OverviewSection()}
-              {activeTab === 'technical' && TechnicalSection()}
-              {activeTab === 'risk' && RiskSection()}
-              {/* {activeTab === 'ai' && AiSection()} */}
-              {activeTab === 'role' && <RoleFitSection />}
-              {activeTab === 'resume' && <ResumeSection />}
-              {activeTab === 'appendix' && AppendixSection()}
-            </div>
-          </>
+            !isPublicView ? (
+              <>
+                <TabNav />
+                <div className={'px-2 sm:px-0 pb-2'}>
+                  {activeTab === 'overview' && OverviewSection()}
+                  {activeTab === 'technical' && TechnicalSection()}
+                  {activeTab === 'risk' && RiskSection()}
+                  {/* {activeTab === 'ai' && AiSection()} */}
+                  {activeTab === 'role' && <RoleFitSection />}
+                  {activeTab === 'resume' && <ResumeSection />}
+                  {activeTab === 'appendix' && AppendixSection()}
+                </div>
+              </>
+            ) : (
+              OverviewSection()
+            )
         )}
-        {!headless && (
+        {!headless && !suppressChat && (
           <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />
         )}
       </div>

package/src/components/GaugeCard.tsx

@@ -74,7 +74,7 @@ export default function GaugeCard({
     >
       <div className="mb-3 flex items-start justify-between gap-2 pt-5 px-5">
         <div>
-          <div className={'font-semibold text-xl'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          <div className={'font-semibold sm:text-xl text-base'} style={{ color: 'var(--text-main)' }}>{title}</div>
           <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
         </div>
         {(tooltipText || description) && (

package/src/components/ReportHeader.tsx

@@ -99,13 +99,13 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-col md:flex-row items-center justify-between' : 'flex-col'}`}>
+      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-row items-center justify-between' : 'flex-col'}`}>
         {/* Info section: Title, Candidate, Details and Summary */}
         <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>
           <div className='space-y-1'>
-            <span className='flex gap-2 w-full items-end text-start justify-start mb-2'>
-              <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate:</h2>
-              <div className={'text-xl font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
+            <span className='flex gap-2 w-full items-end text-start justify-start mb-2 sm:text-xl text-base '>
+              <h2 className={'font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate:</h2>
+              <div className={'font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
             </span>
             <span className='flex gap-2 w-full items-end text-start justify-start'>
               <h3 className='text-sm font-semibold text-[--text-secondary]'>Date:</h3>
@@ -117,7 +117,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                     .map(code => countriesLib.getName((code || '').toUpperCase(), 'en') || code)
                     .filter(Boolean);
                   return (
-                    <p className={'flex items-center gap-1 text-sm'}>
+                    <div className={'flex items-center gap-1 text-sm'}>
                       <span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>
                         {countryNames.length > 1 ? 'Countries:' : 'Country:'}
                       </span>
@@ -132,7 +132,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                           </div>
                         </div>
                       </span>
-                    </p>
+                    </div>
                   );
                 })()
               )}

package/src/components/RiskCard.tsx

@@ -58,7 +58,7 @@ export default function RiskCard({
     >
       <div className="mb-3 flex items-start justify-between gap-2">
         <div>
-          <div className={'font-semibold text-xl'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          <div className={'font-semibold sm:text-xl text-base'} style={{ color: 'var(--text-main)' }}>{title}</div>
           {description ? (
             <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
           ) : null}

package/src/components/SkillsBubble.tsx

@@ -396,17 +396,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
       <div ref={containerRef} style={{ width: '100%', height: 340, position: 'relative' }}>
         {!headless && (
           <div
-            className="text-xs rounded-md border shadow-sm px-2 py-1"
-            style={{
-              position: 'absolute',
-              right: 8,
-              top: 8,
-              zIndex: 5,
-              pointerEvents: 'none',
-              background: 'var(--content-card-background)',
-              borderColor: 'var(--icon-button-secondary)',
-              color: 'var(--text-secondary)'
-            }}
+            className="text-xs rounded-md border shadow-sm px-2 py-1 relative sm:absolute sm:right-2 sm:top-2 z-40 pointer-events-none bg-[var(--content-card-background)] border-[var(--icon-button-secondary)] text-[var(--text-secondary)]"
           >
             <div className="flex items-center gap-2 text-base">
               <span className="inline-block h-3 w-3 rounded-full  border border-[var(--text-secondary)]" style={{ background: green5 }} />
@@ -480,7 +470,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
               </span>
             ) : null}
           </div>
-          <div className="grid grid-cols-2 gap-x-20 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-20 text-xs" style={{ color: 'var(--text-secondary)', minHeight: 250 }}>
             <div className="grid gap-3">
               {leftColumnGrid.map((entry, idx) => (
                 columnComponent(entry, idx, true)