@afncdelacru/brady-chat 0.1.0

package/src/lib/EnhancedBradyChat.tsx

@@ -0,0 +1,590 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Send, Mic } from 'lucide-react';
+
+import { checkBradyHealth } from './api/bradyHealth';
+import { sendBradyPrompt } from './api/afnBradyApi';
+import { useBradyChat } from './BradyChatContext';
+import { InfoRequestForm } from './InfoRequestForm';
+import { LeadershipCallForm } from './LeadershipCallForm';
+import { PersonalizedOverviewForm } from './PersonalizedOverviewForm';
+import { QuickSuggestions } from './QuickSuggestions';
+import { ModePromptTree } from './ModePromptTree';
+import { ImageWithFallback } from './ImageWithFallback';
+
+type ModeVariant = 'loan-officer' | 'branch-manager';
+
+export interface EnhancedBradyChatProps {
+  /**
+   * Controls whether the mode toggle uses Earnings (LO) or Profit (branch manager) language.
+   * Defaults to 'loan-officer'.
+   */
+  modeVariant?: ModeVariant;
+  /**
+   * Avatar image URL for Brady.
+   * Typically you pass something like `/bradyIcon.png` from your app's public assets.
+   */
+  avatarSrc: string;
+}
+
+export function EnhancedBradyChat({ modeVariant = 'loan-officer', avatarSrc }: EnhancedBradyChatProps) {
+  const [bradyHealthy, setBradyHealthy] = useState(true);
+  const {
+    workflowType,
+    messages,
+    addMessage,
+    resetChat,
+    setWorkflow,
+    activeMode,
+    modeStep,
+    modeData,
+    setModeStep,
+    updateModeData,
+    setCalculatorOpen,
+    activateMode,
+    resetMode,
+    isHidden,
+    setIsHidden,
+  } = useBradyChat();
+  const [inputValue, setInputValue] = useState('');
+  const [showForm, setShowForm] = useState(false);
+  const [inputDisabled, setInputDisabled] = useState(false);
+  const [showModePrompts, setShowModePrompts] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [suggestionLinks, setSuggestionLinks] = useState<{ text: string; prompt: string }[] | null>(null);
+
+  const isBranchManager = modeVariant === 'branch-manager';
+  const pageMode = isBranchManager ? 'profit' : 'earnings';
+  const isModeActive = activeMode === pageMode;
+  const hasPersonalizedData = false;
+
+  const handleFocusToggle = () => {
+    if (isModeActive) {
+      resetMode();
+    } else {
+      activateMode(pageMode);
+      setTimeout(() => {
+        addMessage({
+          type: 'brady',
+          text: `${
+            isBranchManager ? 'Profit' : 'Earnings'
+          } Mode is on.\n\nI'll focus on ways to increase ${
+            isBranchManager ? 'profit' : 'income'
+          } using ${
+            isBranchManager
+              ? 'branch economics, recruiting leverage, and operational efficiency'
+              : 'volume, efficiency, and time savings'
+          }.`,
+        });
+      }, 300);
+    }
+  };
+
+  useEffect(() => {
+    let mounted = true;
+    const checkHealth = async () => {
+      const healthy = await checkBradyHealth();
+      if (mounted) setBradyHealthy(healthy);
+    };
+    checkHealth();
+    const interval = setInterval(checkHealth, 60000);
+    return () => {
+      mounted = false;
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (
+      workflowType === 'info-request' ||
+      workflowType === 'leadership-call' ||
+      workflowType === 'personalized-overview-request'
+    ) {
+      setShowForm(true);
+      setInputDisabled(true);
+      setShowModePrompts(false);
+    } else {
+      setShowForm(false);
+      setInputDisabled(false);
+    }
+  }, [workflowType]);
+
+  useEffect(() => {
+    if (activeMode !== 'none' && modeStep === 'volume') {
+      setShowModePrompts(true);
+
+      if (activeMode === 'earnings') {
+        if (hasPersonalizedData) {
+          setTimeout(() => {
+            addMessage({
+              type: 'brady',
+              text: 'I have an estimate of your recent production.\nDoes this feel close?',
+            });
+          }, 500);
+        } else {
+          setTimeout(() => {
+            addMessage({
+              type: 'brady',
+              text: 'To keep this realistic, about how much volume do you fund in an average month?',
+            });
+          }, 500);
+        }
+      } else if (activeMode === 'profit') {
+        if (hasPersonalizedData) {
+          setTimeout(() => {
+            addMessage({
+              type: 'brady',
+              text: 'I have a baseline view of your branch.\nDoes this feel directionally right?',
+            });
+          }, 500);
+        } else {
+          setTimeout(() => {
+            addMessage({
+              type: 'brady',
+              text: 'To start, about how much volume does your branch fund annually?',
+            });
+          }, 500);
+        }
+      }
+    }
+  }, [activeMode, modeStep, addMessage]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, showForm, showModePrompts]);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  const handleModeResponse = (response: string, data?: any) => {
+    addMessage({ type: 'user', text: response });
+    setShowModePrompts(false);
+
+    if (data) {
+      updateModeData(data);
+    }
+
+    if (activeMode === 'earnings') {
+      if (modeStep === 'volume') {
+        setTimeout(() => {
+          addMessage({
+            type: 'brady',
+            text: 'And roughly how do you get paid today?',
+          });
+          setModeStep('comp');
+          setShowModePrompts(true);
+        }, 800);
+      } else if (modeStep === 'comp') {
+        setTimeout(() => {
+          addMessage({
+            type: 'brady',
+            text: "Got it. I'll pull this together so you can see it clearly.",
+          });
+          setModeStep('calculator');
+          setTimeout(() => {
+            setCalculatorOpen(true);
+            setModeStep('complete');
+            setTimeout(() => {
+              addMessage({
+                type: 'brady',
+                text: 'Want to sanity-check these assumptions together?',
+              });
+              setShowModePrompts(true);
+            }, 1000);
+          }, 800);
+        }, 800);
+      } else if (modeStep === 'complete') {
+        if (response.includes('Talk through')) {
+          setShowModePrompts(false);
+          setTimeout(() => {
+            startWorkflow('leadership-call');
+          }, 500);
+        } else if (response.includes('Adjust')) {
+          setShowModePrompts(false);
+          setTimeout(() => {
+            setCalculatorOpen(true);
+          }, 500);
+        } else {
+          setShowModePrompts(false);
+          setTimeout(() => {
+            addMessage({
+              type: 'brady',
+              text: "I'm here whenever you need me. What else would you like to explore?",
+            });
+          }, 800);
+        }
+      }
+    } else if (activeMode === 'profit') {
+      if (modeStep === 'volume') {
+        setTimeout(() => {
+          addMessage({
+            type: 'brady',
+            text:
+              "For modeling, I'll assume:\n• ~300 bps branch margin\n• ~150 bps gross profit\n" +
+              '• ~75 bps operating expenses\n\nWe can adjust all of this.',
+          });
+          setModeStep('economics');
+          setShowModePrompts(true);
+        }, 800);
+      } else if (modeStep === 'economics') {
+        setTimeout(() => {
+          addMessage({
+            type: 'brady',
+            text: "Here's a clean P&L view based on what we discussed.",
+          });
+          setModeStep('calculator');
+          setTimeout(() => {
+            setCalculatorOpen(true);
+            setModeStep('complete');
+            setTimeout(() => {
+              addMessage({
+                type: 'brady',
+                text: "Want help building a realistic pro forma based on AFN's structure?",
+              });
+              setShowModePrompts(true);
+            }, 1000);
+          }, 800);
+        }, 800);
+      } else if (modeStep === 'complete') {
+        if (response.includes('Sanity-check') || response.includes('leadership')) {
+          setShowModePrompts(false);
+          setTimeout(() => {
+            startWorkflow('leadership-call');
+          }, 500);
+        } else if (response.includes('Adjust')) {
+          setShowModePrompts(false);
+          setTimeout(() => {
+            setCalculatorOpen(true);
+          }, 500);
+        }
+      }
+    }
+  };
+
+  const handleSend = async () => {
+    if (inputValue.trim() && !inputDisabled) {
+      const userText = inputValue;
+      addMessage({ type: 'user', text: userText });
+      setInputValue('');
+      try {
+        const apiResponse = await sendBradyPrompt([{ role: 'user', content: userText }]);
+        let mappedType: 'user' | 'brady' | 'form' = 'brady';
+        if (apiResponse.role === 'user') mappedType = 'user';
+        addMessage({ type: mappedType, text: apiResponse.content });
+      } catch {
+        addMessage({ type: 'brady', text: 'Sorry, Brady AI is currently unavailable.' });
+      }
+    }
+  };
+
+  const handleQuickSuggestion = async (text: string) => {
+    addMessage({ type: 'user', text });
+    try {
+      const apiResponse = await sendBradyPrompt([{ role: 'user', content: text }]);
+
+      if (Array.isArray(apiResponse.suggestionLink)) {
+        setSuggestionLinks(apiResponse.suggestionLink);
+      }
+
+      let mappedType: 'user' | 'brady' | 'form' = 'brady';
+      if (apiResponse.role === 'user') mappedType = 'user';
+      addMessage({ type: mappedType, text: apiResponse.content });
+    } catch {
+      addMessage({ type: 'brady', text: 'Sorry, Brady AI is currently unavailable.' });
+    }
+  };
+
+  const handleInfoFormSubmit = (data: any) => {
+    addMessage({
+      type: 'brady',
+      text:
+        "Got it — thanks.\n\nWe'll email you a personalized overview shortly.\nIf you have questions in the meantime, I'm here to help.",
+    });
+    setShowForm(false);
+    setInputDisabled(false);
+    setWorkflow('free');
+  };
+
+  const handleLeadershipFormSubmit = (data: any) => {
+    addMessage({
+      type: 'brady',
+      text:
+        "Thanks — you're all set.\n\nSomeone from AFN leadership will reach out shortly to connect.\nIn the meantime, feel free to ask me anything.",
+    });
+    setShowForm(false);
+    setInputDisabled(false);
+    setWorkflow('free');
+  };
+
+  const handlePersonalizedOverviewFormSubmit = (data: any) => {
+    addMessage({
+      type: 'brady',
+      text:
+        "Perfect — thanks!\n\nWe'll create a personalized dashboard and earnings calculator based on your information and send it to you shortly.\n\nYou'll be able to see exactly what your business could look like at AFN with specific projections tailored to your situation.",
+    });
+    setShowForm(false);
+    setInputDisabled(false);
+    setWorkflow('free');
+  };
+
+  const handleFormCancel = () => {
+    setShowForm(false);
+    setInputDisabled(false);
+    resetChat();
+  };
+
+  const buildSuggestions = () => {
+    if (suggestionLinks && suggestionLinks.length > 0) {
+      return suggestionLinks.map((s) => ({
+        text: s.text,
+        action: () => handleQuickSuggestion(s.prompt),
+      }));
+    }
+    return [
+      {
+        text: 'How does AFN help LOs grow?',
+        action: () => handleQuickSuggestion('How does AFN help LOs grow?'),
+      },
+      {
+        text: 'How does AFN help branch managers earn more?',
+        action: () => handleQuickSuggestion('How does AFN help branch managers earn more?'),
+      },
+      {
+        text: 'Why do people choose AFN?',
+        action: () => handleQuickSuggestion('Why do people choose AFN?'),
+      },
+      {
+        text: 'The AFN Advantage',
+        action: () => handleQuickSuggestion('See How AFN Supports Loan Officer Success'),
+      },
+      {
+        text: 'Why AFN?',
+        action: () => handleQuickSuggestion('Why AFN?'),
+      },
+      {
+        text: 'How does AI help me earn more?',
+        action: () => handleQuickSuggestion('How does AI help me earn more?'),
+      },
+      {
+        text: 'What makes AFN different?',
+        action: () => handleQuickSuggestion('What makes AFN different?'),
+      },
+    ];
+  };
+
+  const initialSuggestions = buildSuggestions();
+  const postSubmitSuggestions = buildSuggestions();
+
+  const showPostSubmitSuggestions = messages.length > 2 && !showForm && workflowType === 'free' && activeMode === 'none';
+
+  const startWorkflow = (workflow: any) => {
+    setWorkflow(workflow);
+    if (workflow === 'info-request') {
+      setShowForm(true);
+      setInputDisabled(true);
+    } else if (workflow === 'leadership-call') {
+      setShowForm(true);
+      setInputDisabled(true);
+    }
+  };
+
+  const modeBadge =
+    activeMode !== 'none' ? (
+      <div
+        className={`px-3 py-1 rounded-full text-xs font-medium ${
+          activeMode === 'earnings'
+            ? 'bg-[#8B5CF6]/20 text-[#8B5CF6] border border-[#8B5CF6]/30'
+            : 'bg-[#4399D1]/20 text-[#4399D1] border border-[#4399D1]/30'
+        }`}
+      >
+        {activeMode === 'earnings' ? 'Earnings Mode' : 'Profit Mode'}
+      </div>
+    ) : null;
+
+  if (isHidden) return null;
+
+  return (
+    <div className="fixed top-0 right-0 w-full md:w-[360px] h-screen flex flex-col bg-gradient-to-br dark:from-zinc-900 dark:to-zinc-800 from-white to-zinc-50 border-l md:border-l dark:border-zinc-700 border-zinc-300 shadow-2xl z-[100] overflow-hidden transition-all duration-300">
+      <div className="flex items-center justify-between px-4 py-3 border-b dark:border-zinc-800 border-zinc-200 dark:bg-zinc-950/80 bg-white/95 backdrop-blur-lg">
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <span className="relative w-10 h-10 block group">
+              <span
+                className={`absolute inset-0 rounded-full transition-colors duration-300 ${
+                  bradyHealthy ? 'dark:bg-zinc-700/40 bg-transparent' : 'bg-red-600/80 dark:bg-red-700/80'
+                }`}
+              ></span>
+              <ImageWithFallback
+                src={avatarSrc}
+                alt="Brady AI"
+                className="w-10 h-10 relative z-10"
+                onClick={() => setIsHidden(true)}
+              />
+            </span>
+          </div>
+          <div className="dark:text-white text-zinc-900">Brady AI</div>
+        </div>
+
+        <div className="relative inline-flex items-center h-[34px] w-[150px] dark:bg-zinc-800/50 bg-zinc-200 rounded-full p-1">
+          <button
+            onClick={() => isModeActive && resetMode()}
+            className={`relative z-10 flex-1 h-full rounded-full text-[11px] tracking-wide uppercase font-medium transition-all duration-300 flex items-center justify-center ${
+              !isModeActive
+                ? 'text-white'
+                : 'dark:text-zinc-500 text-zinc-600 hover:dark:bg-zinc-700/50 hover:bg-zinc-300/50'
+            }`}
+          >
+            NORMAL
+          </button>
+
+          <div className="relative flex-1">
+            {!isModeActive && (
+              <div
+                className="absolute inset-0 rounded-full animate-pulse"
+                style={{
+                  boxShadow: isBranchManager
+                    ? '0 0 16px rgba(67, 153, 209, 0.6), inset 0 0 10px rgba(67, 153, 209, 0.3)'
+                    : '0 0 16px rgba(139, 92, 246, 0.6), inset 0 0 10px rgba(139, 92, 246, 0.3)',
+                  animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                }}
+              />
+            )}
+            <button
+              onClick={() => !isModeActive && handleFocusToggle()}
+              className={`relative z-10 w-full h-full rounded-full text-[11px] tracking-wide uppercase font-medium transition-all duration-300 flex items-center justify-center ${
+                isModeActive
+                  ? 'text-white'
+                  : 'dark:text-zinc-500 text-zinc-600 hover:dark:bg-zinc-700/50 hover:bg-zinc-300/50'
+              }`}
+            >
+              {isBranchManager ? 'PROFIT' : 'EARNINGS'}
+            </button>
+          </div>
+
+          <div
+            className={`absolute top-1 bottom-1 rounded-full transition-all duration-300 ${
+              isModeActive ? 'left-[50%] right-1' : 'left-1 right-[50%]'
+            }`}
+            style={
+              isModeActive
+                ? {
+                    background: isBranchManager
+                      ? 'linear-gradient(135deg, #4399D1 0%, #3b82d9 100%)'
+                      : 'linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%)',
+                    boxShadow: isBranchManager
+                      ? '0 0 16px rgba(67, 153, 209, 0.15)'
+                      : '0 0 16px rgba(139, 92, 246, 0.15)',
+                  }
+                : {
+                    background: 'var(--tw-gradient-stops)',
+                    backgroundImage: 'linear-gradient(135deg, rgb(82, 82, 91) 0%, rgb(63, 63, 70) 100%)',
+                  }
+            }
+          />
+        </div>
+      </div>
+
+      {modeBadge && (
+        <div className="px-4 py-2 border-b dark:border-zinc-800 border-zinc-200">
+          {modeBadge}
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <AnimatePresence>
+          {messages.map((msg, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className={`flex ${msg.type === 'user' ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`px-4 py-3 rounded-2xl whitespace-pre-line ${
+                  msg.type === 'user'
+                    ? 'bg-[#8B5CF6] text-white rounded-br-sm'
+                    : 'dark:bg-zinc-800 bg-zinc-100 dark:text-zinc-100 text-zinc-900 rounded-bl-sm'
+                }`}
+              >
+                {msg.text}
+              </div>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+
+        {showForm && workflowType === 'info-request' && (
+          <InfoRequestForm onSubmit={handleInfoFormSubmit} onCancel={handleFormCancel} />
+        )}
+
+        {showForm && workflowType === 'leadership-call' && (
+          <LeadershipCallForm onSubmit={handleLeadershipFormSubmit} onCancel={handleFormCancel} />
+        )}
+
+        {showForm && workflowType === 'personalized-overview-request' && (
+          <PersonalizedOverviewForm
+            onSubmit={handlePersonalizedOverviewFormSubmit}
+            onCancel={handleFormCancel}
+          />
+        )}
+
+        {showModePrompts && activeMode !== 'none' && (
+          <ModePromptTree
+            mode={activeMode as 'earnings' | 'profit'}
+            step={modeStep}
+            hasPersonalizedData={hasPersonalizedData}
+            onResponse={handleModeResponse}
+          />
+        )}
+
+        {!showForm &&
+          !showModePrompts &&
+          messages.length === 1 &&
+          workflowType === 'free' &&
+          activeMode === 'none' && <QuickSuggestions suggestions={initialSuggestions} />}
+
+        {showPostSubmitSuggestions && !showModePrompts && (
+          <QuickSuggestions suggestions={postSubmitSuggestions} />
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="p-4 border-t dark:border-zinc-800 border-zinc-200 dark:bg-zinc-900 bg-zinc-50">
+        <div
+          className={`flex items-center gap-2 dark:bg-zinc-800 bg-white rounded-full px-4 py-3 border dark:border-zinc-700 border-zinc-300 focus-within:border-[#8B5CF6] transition-colors ${
+            inputDisabled || showModePrompts ? 'opacity-50 cursor-not-allowed' : ''
+          }`}
+        >
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+            placeholder={
+              inputDisabled || showModePrompts ? 'Use buttons above...' : 'Ask me anything...'
+            }
+            disabled={inputDisabled || showModePrompts}
+            className="flex-1 bg-transparent dark:text-white text-zinc-900 dark:placeholder-zinc-500 placeholder-zinc-400 outline-none text-sm disabled:cursor-not-allowed"
+          />
+          <button
+            className="dark:text-zinc-400 text-zinc-500 dark:hover:text-white hover:text-zinc-900 transition-colors disabled:opacity-50"
+            disabled={inputDisabled || showModePrompts}
+          >
+            <Mic className="w-5 h-5" />
+          </button>
+          <button
+            onClick={handleSend}
+            disabled={inputDisabled || showModePrompts}
+            className="bg-[#8B5CF6] hover:bg-[#7C3AED] text-white rounded-full p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Send className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/lib/ImageWithFallback.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==';
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false);
+
+  const handleError = () => {
+    setDidError(true);
+  };
+
+  const { src, alt, style, className, ...rest } = props;
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  );
+}
+