);
// ---------- AI CHAT CONTENT (rendered inside the morphing surface) ----------
const ChatContent = ({onClose, opacity}) => {
const [draft, setDraft] = useState('');
const [messages, setMessages] = useState([]);
const [thinking, setThinking] = useState(false);
const scrollRef = useRef(null);
const suggestions = [
'Summarize my meetings this week',
'What did Bobby say about drainage?',
'Show me open todos from Golf Course Planning',
'Find action items I owe Sarah',
];
const send = useCallback((text) => {
if (!text.trim()) return;
setMessages(m => [...m, {role:'user', text}]);
setDraft('');
setThinking(true);
setTimeout(() => {
setThinking(false);
setMessages(m => [...m, {role:'ai', text: sampleReply(text)}]);
}, 1400);
}, []);
useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, thinking]);
return (
0.5 ? 'auto' : 'none',
}}>
{/* header — `.plus` wordmark in info accent (the morphing blue orb on
the left IS the leading dot) + close button on the right. */}
{/* invisible spacer the width of the leading dot, so "plus" lands
in the exact spot regardless of which phase paints the dot. */}
plus
{/* conversation */}
{messages.length === 0 && (
Ask your meetings anything.
I have transcripts for 6 meetings this week. Try one of these:
)}
{messages.map((m, i) => (
))}
{thinking && }
{/* suggestion chips (only before the first message) */}
{messages.length === 0 && (
{/* The dot — lives inside the surface, morphs from center to header */}
{/* Chat content cross-fades in once we're (almost) sheet-sized */}
{(phase === 'chat' || phase === 'opening') && (
)}
{/* Invisible hit target on top of the FAB position (only when idle/recording) */}
{!inMorph && (
);
};
// The dot — lives inside the morphing surface. In FAB phase it sits in the
// lower-left like a period on baseline (Part 1 of the logo system). In chat
// phase it slides to the upper-left of the sheet and becomes the leading dot
// of the ".plus" wordmark (Part 2 of the logo system) in info accent.
const DotOrb = ({phase, pressProgress}) => {
const isSheet = phase === 'chat' || phase === 'opening';
const isPressing = phase === 'pressing';
// color: black (mark-ink) idle → info-blue at AI · negative-red while recording
const color =
phase === 'recording' ? C.negative :
isPressing ? blend('#000000', C.info, pressProgress) :
isSheet || phase === 'closing' ? C.info :
'#000000';
// Brand spec sizes:
// FAB resting: 33% of 64px → 21px (matches `.ico .d` ratio in brand book)
// Pressing: grows to ~26px to telegraph intent
// In chat: ~16px — leading-dot proportion of ".plus" wordmark
const size =
isPressing ? 21 + 5 * pressProgress :
isSheet ? 16 :
21;
// Position — measured from the morphing surface's top-left.
// FAB: lower-left padding of 22% (≈14px on a 64px FAB)
// Sheet: top-left of header so it reads as the leading dot of "plus"
const fabPad = 14; // 22% of 64
const sheetX = 24; // matches "plus" text x-anchor (see ChatContent)
const sheetY = 24; // baseline-aligns with "plus" text below
const posStyle = isSheet ? {
left: sheetX, top: sheetY, right: 'auto', bottom: 'auto',
} : {
left: fabPad, bottom: fabPad, right: 'auto', top: 'auto',
};
return (
);
};
// linear interpolate between two hex colors
function blend(a, b, t) {
const pa = parseInt(a.slice(1), 16), pb = parseInt(b.slice(1), 16);
const ar = (pa>>16)&255, ag=(pa>>8)&255, ab=pa&255;
const br = (pb>>16)&255, bg=(pb>>8)&255, bb=pb&255;
const r = Math.round(ar + (br-ar)*t);
const g = Math.round(ag + (bg-ag)*t);
const bl= Math.round(ab + (bb-ab)*t);
return `rgb(${r},${g},${bl})`;
}
// canned replies
function sampleReply(prompt) {
const p = prompt.toLowerCase();
if (p.includes('bobby') || p.includes('drainage')) {
return 'In the Golf Course Planning meeting on May 18, Bobby flagged drainage on the west slope as a concern — he saw standing water after the April 9 rain. He suggested adding a French drain along the cart path before the green is shaped. Want me to add it as a todo?';
}
if (p.includes('todo') || p.includes('action')) {
return 'You have 4 open todos:\n• Golf Course Planning — get drainage quote (3 days overdue)\n• Q3 Software Sync — review architecture doc\n• Vacation Club Sales — send proposal v2 to Marcus\n• Investor Follow-up — confirm Tuesday slot';
}
if (p.includes('summar') || p.includes('week')) {
return 'This week (May 17–21) you recorded 2 hours across 6 meetings. Themes: real-estate underwriting, golf course logistics, and one investor follow-up. The Golf Course Planning meeting still needs review.';
}
if (p.includes('sarah')) {
return 'I don\'t see a Sarah in this week\'s transcripts. The closest match is Sara Chen from your April 30 investor call — she asked you to send a 1-pager on unit economics by mid-May. That one\'s still open.';
}
return 'Got it — let me look across your transcripts. I\'ll pull the most relevant snippets in a moment.';
}
// =============================================================
// APP
// =============================================================
const App = () => {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
return (
<>
{/* keyframes */}
setTweak('speed', v)}/>
Tap the white square in the bottom-right to start a recording. Press & hold it to expand into the dot+ AI chat.