// fusion/chat.jsx
// Brutalist-styled chat panel — reusable as overlay on the home page or
// standalone in an iframe embed. No bubbles: AI speaks as serif/sans
// editorial copy, user speaks as monospace right-aligned. Project cards
// have hard 1.5px borders. Input is full-width with hard edges.
//
// Interaction: small keyword-based response engine. Clicking a chip or
// typing a question appends a user message + a typed-out AI response,
// sometimes attaching cards (projects, articles, contact, now).
const D = window.SITE_DATA;
// Predefined Q&A library. Keys are normalized; matched by includes()
// against user input. Each answer can have text + an attachment kind.
const FUSION_REPLIES = [
{ match: ['介绍', '你是谁', '自我', '是谁'], kind: 'intro' },
{ match: ['作品', '项目', '做过什么', '产品', '看作品', 'projects'], kind: 'projects' },
{ match: ['文章', '写过', '博客', '观点', 'blog'], kind: 'articles' },
{ match: ['最近', 'now', '在做', '在忙'], kind: 'now' },
{ match: ['联系', '微信', 'wechat', '邮箱', '约', 'email', 'contact'], kind: 'contact' },
{ match: ['岗位', '招聘', '工作', '简历', '求职', '入职'], kind: 'hire' },
{ match: ['书', '读', '推荐'], kind: 'books' },
];
function classifyInput(text) {
const norm = text.toLowerCase();
for (const r of FUSION_REPLIES) {
if (r.match.some((m) => norm.includes(m.toLowerCase()))) return r.kind;
}
return 'fallback';
}
function fusionAnswer(kind) {
switch (kind) {
case 'intro': return {
lead: '我是 ' + D.name + '，' + D.role + '。',
body: D.bio + ' 关注金融场景的 AI 落地，熟悉 RAG / 推荐 / Agent 三类范式。',
cards: null, kind: 'intro',
};
case 'projects': return {
lead: '我做过 ' + D.projects.length + ' 个产品。下面这几个是我最有代表性的：',
cards: D.projects, kind: 'projects',
};
case 'articles': return {
lead: '写作是我观察行业的方式。一直在写，也一直在学。最近这几篇：',
cards: D.articles, kind: 'articles',
};
case 'now': return {
lead: '这是我最近 14 天的状态——',
body: null,
cards: D.now, kind: 'now',
};
case 'contact': return {
lead: '最快的方式：',
body: '工作上的事用邮箱比较方便。聊天用微信。',
cards: 'contact', kind: 'contact',
};
case 'hire': return {
lead: '我适合 AI 产品负责人 / 高级 AI PM 岗位，金融或 B 端场景优先。',
body: '9 年产品经验，9 年金融行业，3 年 AI 产品负责人。覆盖 RAG / 推荐 / Agent 三类产品的样本设计、Prompt 工程、Function Calling、人机协作分级、合规护栏与评测回归。带过 7 人小组，2 名实习生转正。简历可以直接发，留个邮箱我之后亲自回你。',
cards: 'cta', kind: 'hire',
};
case 'books': return {
lead: '今年读到现在，最推荐这三本：',
body: '《How to Take Smart Notes》《Hooked》《The Mom Test》。前两本对 AI PM 的工作流帮助很大，第三本是用户访谈的圣经。',
cards: null, kind: 'books',
};
default: return {
lead: '这个问题没在我预设的回答里——但我会看到。',
body: '留个邮箱，我之后亲自回你；或者直接发短信到 ' + D.phone + '。',
cards: 'cta', kind: 'fallback',
};
}
}
const CHIP_QUESTIONS = [
'介绍一下你自己',
'看作品',
'最近写了什么',
'NOW · 在做什么',
'能合作吗',
'推荐几本书',
];
// ─────────────────────────────────────────────────────────────────────
// Cards — brutal style, hard 1.5px borders, tabular meta in mono.
// ─────────────────────────────────────────────────────────────────────
function ProjectCard({ p, t, i }) {
return (
0{i + 1}
{p.name}
{p.tag.toUpperCase()}
{p.desc}
{p.year}
{p.status === 'live' ? '● LIVE' : '○ SUNSET'}
{p.users}
);
}
function ArticleRow({ a, t, last, onOpen }) {
return (
onOpen && onOpen(a)}
style={{
display: 'grid', gridTemplateColumns: '1fr auto', gap: 14, padding: '12px 0',
borderBottom: last ? 'none' : `1px solid ${t.line}`, alignItems: 'baseline',
color: t.ink, cursor: onOpen ? 'pointer' : 'default',
transition: 'color .12s',
}}
onMouseEnter={(e) => { if (onOpen) e.currentTarget.style.color = t.accent; }}
onMouseLeave={(e) => { if (onOpen) e.currentTarget.style.color = t.ink; }}
>
{a.title}
{onOpen && 阅读 →}
{a.date} · {a.reads} · #{a.tag}
);
}
// ─────────────────────────────────────────────────────────────────────
// ArticleReader — full-screen overlay article reading view.
// Opens from inside the chat. ESC or button closes. Footer has external
// link to 人人都是产品经理 original post.
// ─────────────────────────────────────────────────────────────────────
function ArticleReader({ article, onClose, t }) {
React.useEffect(() => {
if (!article) return;
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('keydown', onKey);
document.body.style.overflow = prev;
};
}, [article, onClose]);
if (!article) return null;
const renderBody = (md) => {
if (!md) return null;
return md.split('\n\n').map((block, i) => {
const trimmed = block.trim();
if (!trimmed) return null;
if (trimmed.startsWith('## ')) {
return (
{trimmed.slice(3)}
);
}
if (trimmed.startsWith('> ')) {
return (
{trimmed.slice(2)}
);
}
return (
{trimmed}
);
});
};
return (
{/* Sticky top bar */}
WORDS · 文章 · 阅读视图
{/* Article */}
{article.date}
{article.reads} 阅读
#{article.tag}
笔名「{D.penName}」
{article.title}
{article.body && article.body.trim() ? (
{renderBody(article.body)}
) : (
本文正文整理中
这篇文章的站内可读版本正在整理。在那之前，可以直接去人人都是产品经理读原文，下方链接一键直达。
)}
{/* Footer · External link */}
首发 · ORIGINAL POST
在人人都是产品经理阅读原文
↗
笔名「{D.penName}」 · woshipm.com/u/1678654
{article.url.replace('https://', '').replace('www.', '')}
{/* Return CTA */}
NOW · 2025-05
{items.map((n, i) => (
0{i + 1}/
{n}
))}
);
}
function ContactBlock({ t }) {
const [hoverWechat, setHoverWechat] = React.useState(false);
const rows = [
{ k: 'EMAIL', v: D.email, accent: true },
{ k: 'WECHAT', v: D.wechat, isWechat: true },
];
return (
{rows.map((r, i) => (
{ if (r.isWechat) setHoverWechat(true); }}
onMouseLeave={() => { if (r.isWechat) setHoverWechat(false); }}
>
{r.k}
{r.v}
{r.isWechat ? '悬停 ↗' : 'COPY ↗'}
{/* QR popover for wechat row */}
{r.isWechat && hoverWechat && (
WECHAT QR
扫码加我
工作时间 · 通常 1 小时内回
)}
))}
{D.name} · 现在
{a.lead && (
{a.lead}
)}
{a.body && (
{a.body}
)}
{a.kind === 'projects' && a.cards && (
{a.cards.map((p, i) =>
)}
)}
{a.kind === 'articles' && a.cards && (
标题 · TITLE
日期 · 阅读 · 标签
{a.cards.map((x, i) =>
)}
)}
{a.kind === 'now' && Array.isArray(a.cards) &&
}
{a.cards === 'contact' &&
}
{a.cards === 'cta' &&
}
);
}
// ─────────────────────────────────────────────────────────────────────
// FusionChatPanel — full panel: header (optional), message list, chips,
// input. `embedded=true` removes the close button and trims the header.
// `seed` is the first user-question kind to auto-fire on mount (handy for
// links from the home page to land you mid-conversation).
// ─────────────────────────────────────────────────────────────────────
function FusionChatPanel({ t, onClose, embedded = false, seed }) {
const initialAnswer = fusionAnswer('intro');
initialAnswer.lead = '你好，我是 ' + D.name + '。这里是一段对话，不是页面 — 你问，我答。';
initialAnswer.body = '想了解什么都行：项目、文章、最近在做什么、想合作。下面有几个常被问到的，可以直接点。';
const [messages, setMessages] = React.useState([
{ role: 'ai', answer: initialAnswer },
]);
const [input, setInput] = React.useState('');
const [typing, setTyping] = React.useState(false);
const listRef = React.useRef(null);
const [openedArticle, setOpenedArticle] = React.useState(null);
const ask = React.useCallback((text) => {
if (!text || !text.trim()) return;
const userMsg = { role: 'user', text: text.trim() };
setMessages((m) => [...m, userMsg]);
setInput('');
setTyping(true);
setTimeout(() => {
const kind = classifyInput(text);
const answer = fusionAnswer(kind);
setMessages((m) => [...m, { role: 'ai', answer }]);
setTyping(false);
}, 750);
}, []);
// Auto-fire seed question once on mount (if provided).
const didSeed = React.useRef(false);
React.useEffect(() => {
if (didSeed.current || !seed) return;
didSeed.current = true;
// Skip the simulated user turn — seed answers directly with no question.
const answer = fusionAnswer(seed);
setMessages((m) => [...m, { role: 'ai', answer }]);
}, [seed]);
// Auto-scroll on new messages
React.useEffect(() => {
const el = listRef.current; if (!el) return;
el.scrollTop = el.scrollHeight;
}, [messages, typing]);
return (
{/* Header */}
{D.name}.ASK
在线 · 由本人亲手编写
{!embedded && onClose && (
)}
{embedded && (
YISHI WANG ↗
)}
{/* Messages */}
{messages.map((m, i) =>
)}
{typing && (
)}
{/* Suggestion chips */}
{CHIP_QUESTIONS.map((q, i) => (
))}
{/* Input */}
{/* Article reader modal (rendered last so it overlays everything) */}
setOpenedArticle(null)} t={t} />