Copilot/suggest descriptive names (#201)

Author: asperpharma

node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -15,7 +15,7 @@ type MessageContent =
   | { type: "text"; text: string }
   | { type: "image_url"; image_url: { url: string } };
 
-type Msg = {
+type ChatMessage = {
   role: "user" | "assistant";
   content: string | MessageContent[];
   persona?: string;
@@ -28,9 +28,9 @@ const CHAT_URL = `${SUPABASE_URL}/functions/v1/beauty-assistant`;
 function getTextContent(content: string | MessageContent[]): string {
   if (typeof content === "string") return content;
   return content
-    .filter((p): p is { type: "text"; text: string } => (p as { type: string }).type === "text")
-    .filter((p): p is { type: "text"; text: string } => typeof p === "object" && p !== null && "type" in p && p.type === "text")
-    .map((p) => p.text)
+    .filter((contentPart): contentPart is { type: "text"; text: string } => (contentPart as { type: string }).type === "text")
+    .filter((contentPart): contentPart is { type: "text"; text: string } => typeof contentPart === "object" && contentPart !== null && "type" in contentPart && contentPart.type === "text")
+    .map((contentPart) => contentPart.text)
     .join(" ");
 }
 
@@ -44,25 +44,25 @@ async function streamChat({
   onDone,
   onSafetyFlags,
 }: {
-  messages: Msg[];
+  messages: ChatMessage[];
   forcePersona?: string;
   userProfile?: { skin_type: string | null; skin_concern: string; tags: string[] } | null;
   campaignSource?: string | null;
-  onPersona: (p: string) => void;
+  onPersona: (persona: string) => void;
   onDelta: (text: string) => void;
   onDone: () => void;
   onSafetyFlags?: (flags: string[]) => void;
 }) {
-  const payload = messages.map((m) => ({
-    role: m.role,
-    content: m.content,
+  const payload = messages.map((chatMessage) => ({
+    role: chatMessage.role,
+    content: chatMessage.content,
   }));
 
   const { data: { session } } = await supabase.auth.getSession();
   const token = session?.access_token;
   if (!token) throw new Error("Please sign in to use the AI concierge.");
 
-  const resp = await fetch(CHAT_URL, {
+  const chatResponse = await fetch(CHAT_URL, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -71,37 +71,37 @@ async function streamChat({
     body: JSON.stringify({ messages: payload, forcePersona, userProfile, ...(campaignSource ? { source: campaignSource } : {}) }),
   });
 
-  if (!resp.ok) {
-    const err = await resp.json().catch(() => ({ error: "Connection failed" }));
-    throw new Error(err.error || `Error ${resp.status}`);
+  if (!chatResponse.ok) {
+    const errorResponse = await chatResponse.json().catch(() => ({ error: "Connection failed" }));
+    throw new Error(errorResponse.error || `Error ${chatResponse.status}`);
   }
 
-  const persona = resp.headers.get("X-Persona");
+  const persona = chatResponse.headers.get("X-Persona");
   if (persona) onPersona(persona);
 
-  const safetyFlags = resp.headers.get("X-Safety-Flags");
+  const safetyFlags = chatResponse.headers.get("X-Safety-Flags");
   if (safetyFlags && safetyFlags !== "none" && onSafetyFlags) {
     onSafetyFlags(safetyFlags.split(","));
   }
 
-  if (!resp.body) throw new Error("No response body");
+  if (!chatResponse.body) throw new Error("No response body");
 
-  const reader = resp.body.getReader();
+  const reader = chatResponse.body.getReader();
   const decoder = new TextDecoder();
-  let buffer = "";
+  let streamBuffer = "";
 
   while (true) {
     const { done, value } = await reader.read();
     if (done) break;
-    buffer += decoder.decode(value, { stream: true });
-
-    let idx: number;
-    while ((idx = buffer.indexOf("\n")) !== -1) {
-      let line = buffer.slice(0, idx);
-      buffer = buffer.slice(idx + 1);
-      if (line.endsWith("\r")) line = line.slice(0, -1);
-      if (!line.startsWith("data: ")) continue;
-      const json = line.slice(6).trim();
+    streamBuffer += decoder.decode(value, { stream: true });
+
+    let newlineIndex: number;
+    while ((newlineIndex = streamBuffer.indexOf("\n")) !== -1) {
+      let sseDataLine = streamBuffer.slice(0, newlineIndex);
+      streamBuffer = streamBuffer.slice(newlineIndex + 1);
+      if (sseDataLine.endsWith("\r")) sseDataLine = sseDataLine.slice(0, -1);
+      if (!sseDataLine.startsWith("data: ")) continue;
+      const json = sseDataLine.slice(6).trim();
       if (json === "[DONE]") {
         onDone();
         return;
@@ -111,7 +111,7 @@ async function streamChat({
         const content = parsed.choices?.[0]?.delta?.content;
         if (content) onDelta(content);
       } catch {
-        buffer = line + "\n" + buffer;
+        streamBuffer = sseDataLine + "\n" + streamBuffer;
         break;
       }
     }
@@ -185,7 +185,7 @@ const quickPrompts = [
 
 export default function AIConcierge() {
   const [open, setOpen] = useState(false);
-  const [messages, setMessages] = useState<Msg[]>([]);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [currentPersona, setCurrentPersona] = useState<string>("ms_zain");
@@ -358,7 +358,7 @@ export default function AIConcierge() {
       userContent = text.trim();
     }
 
-    const userMsg: Msg = { role: "user", content: userContent, imagePreview };
+    const userMsg: ChatMessage = { role: "user", content: userContent, imagePreview };
     setMessages((prev) => [...prev, userMsg]);
     setInput("");
     setIsLoading(true);
@@ -371,8 +371,8 @@ export default function AIConcierge() {
       setMessages((prev) => {
         const last = prev[prev.length - 1];
         if (last?.role === "assistant") {
-          return prev.map((m, i) =>
-            i === prev.length - 1 ? { ...m, content: assistantSoFar, persona: detectedPersona } : m
+          return prev.map((chatMessage, messageIndex) =>
+            messageIndex === prev.length - 1 ? { ...chatMessage, content: assistantSoFar, persona: detectedPersona } : chatMessage
           );
         }
         return [...prev, { role: "assistant", content: assistantSoFar, persona: detectedPersona }];
@@ -384,9 +384,9 @@ export default function AIConcierge() {
         messages: [...messages, userMsg],
         userProfile,
         campaignSource: deepLinkSource.current,
-        onPersona: (p) => {
-          detectedPersona = p;
-          setCurrentPersona(p);
+        onPersona: (detectedPersonaId) => {
+          detectedPersona = detectedPersonaId;
+          setCurrentPersona(detectedPersonaId);
         },
         onDelta: upsert,
         onDone: () => { setIsLoading(false); playNotificationSound(); },

src/components/AIConcierge.tsx

@@ -25,14 +25,14 @@ export default function AsperAccessCard({ name = "Guest", protocol = "HYDRATION"
     if (isFlipped) return;
     const card = e.currentTarget;
     const box = card.getBoundingClientRect();
-    const x = e.clientX - box.left;
-    const y = e.clientY - box.top;
+    const mouseX = e.clientX - box.left;
+    const mouseY = e.clientY - box.top;
     const centerX = box.width / 2;
     const centerY = box.height / 2;
-    setRotateX(((y - centerY) / centerY) * -15);
-    setRotateY(((x - centerX) / centerX) * 15);
-    setGlareX((x / box.width) * 100);
-    setGlareY((y / box.height) * 100);
+    setRotateX(((mouseY - centerY) / centerY) * -15);
+    setRotateY(((mouseX - centerX) / centerX) * 15);
+    setGlareX((mouseX / box.width) * 100);
+    setGlareY((mouseY / box.height) * 100);
   };
 
   const handleMouseLeave = () => {
@@ -60,9 +60,9 @@ export default function AsperAccessCard({ name = "Guest", protocol = "HYDRATION"
       ];
 
   const personaColor = (persona: string) => {
-    const lower = persona.toLowerCase();
-    if (lower.includes("sami") || lower === "dr_sami") return "text-burgundy";
-    if (lower.includes("zain") || lower === "ms_zain") return "text-polished-gold";
+    const lowerCasePersona = persona.toLowerCase();
+    if (lowerCasePersona.includes("sami") || lowerCasePersona === "dr_sami") return "text-burgundy";
+    if (lowerCasePersona.includes("zain") || lowerCasePersona === "ms_zain") return "text-polished-gold";
     return "text-burgundy";
   };
 

src/components/AsperAccessCard.tsx

@@ -42,9 +42,9 @@ const NUM_BARS = BAR_HEIGHTS.length;
 
 function formatTime(secs: number): string {
   if (!isFinite(secs) || secs <= 0) return "0:00";
-  const m = Math.floor(secs / 60);
-  const s = Math.floor(secs % 60);
-  return `${m}:${s.toString().padStart(2, "0")}`;
+  const minutes = Math.floor(secs / 60);
+  const remainingSeconds = Math.floor(secs % 60);
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
 }
 
 const PERSONA_LABELS: Record<string, { name: string; title: string }> = {
@@ -115,11 +115,11 @@ export const AudioWaveformReplay: React.FC<AudioWaveformReplayProps> = ({
         {isLoading ? (
           /* Loading state — shimmer bars */
           <div className="flex items-end gap-[2px] w-full h-full px-1">
-            {BAR_HEIGHTS.map((h, i) => (
+            {BAR_HEIGHTS.map((barHeight, barIndex) => (
               <div
-                key={i}
+                key={barIndex}
                 className="flex-1 rounded-sm bg-[#800020]/20 animate-pulse"
-                style={{ height: `${(h / 95) * 100}%` }}
+                style={{ height: `${(barHeight / 95) * 100}%` }}
               />
             ))}
           </div>
@@ -129,14 +129,14 @@ export const AudioWaveformReplay: React.FC<AudioWaveformReplayProps> = ({
           </p>
         ) : (
           <div className="flex items-end gap-[2px] w-full h-full px-1">
-            {BAR_HEIGHTS.map((h, i) => {
-              const isActive = i < activeBars;
-              const isCurrent = i === activeBars;
-              const heightPct = `${(h / 95) * 100}%`;
+            {BAR_HEIGHTS.map((barHeight, barIndex) => {
+              const isActive = barIndex < activeBars;
+              const isCurrent = barIndex === activeBars;
+              const heightPct = `${(barHeight / 95) * 100}%`;
 
               return (
                 <div
-                  key={i}
+                  key={barIndex}
                   className={cn(
                     "flex-1 rounded-sm transition-all duration-100",
                     isActive