+
+ onOpenInBrowser: (url: string) => void
+}
+
+function formatCommentTime(isoStr: string): string {
+ try {
+ const d = new Date(isoStr)
+ if (Number.isNaN(d.getTime()))
+ return isoStr
+ const now = new Date()
+ const isToday = d.toDateString() === now.toDateString()
+ const pad = (n: number) => String(n).padStart(2, '0')
+ const time = `${pad(d.getHours())}:${pad(d.getMinutes())}`
+ if (isToday)
+ return time
+ return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${time}`
+ }
+ catch {
+ return isoStr
+ }
+}
+
+function SystemMessagePill({ comment }: { comment: IssueChatComment }) {
+ const timeStr = formatCommentTime(comment.createdAt)
+ const authorPrefix = comment.author && comment.author !== '未知' ? `${comment.author} ` : ''
+ const displayText = `${authorPrefix}${comment.systemText}`
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(false)
+ const [sending, setSending] = useState(false)
+ const [input, setInput] = useState('')
+ const streamEndRef = useRef(null)
+
+ const issueNumber = issue?.number
+
+ useEffect(() => {
+ if (issueNumber == null) {
+ setComments([])
+ setLoading(false)
+ return
+ }
+
+ setLoading(true)
+ postMessage({
+ type: 'issue/comments-query',
+ issueNumber,
+ })
+ }, [issueNumber])
+
+ useEffect(() => {
+ const dispose = onMessage((msg) => {
+ if (msg.type === 'issue/comments-result') {
+ if (issueNumber != null && msg.issueNumber === issueNumber) {
+ setLoading(false)
+ setSending(false)
+ setComments(msg.comments)
+ }
+ }
+ })
+ return dispose
+ }, [issueNumber])
+
+ useEffect(() => {
+ streamEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+ }, [comments])
+
+ const handleRefresh = () => {
+ if (issueNumber == null || loading)
+ return
+ setLoading(true)
+ postMessage({
+ type: 'issue/comments-query',
+ issueNumber,
+ })
+ }
+
+ const handleSend = () => {
+ const text = input.trim()
+ if (!text || issueNumber == null || sending)
+ return
+ setSending(true)
+ postMessage({
+ type: 'issue/comment-post',
+ issueNumber,
+ body: text,
+ })
+ setInput('')
+ }
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ if (e.metaKey || e.ctrlKey || !e.shiftKey) {
+ e.preventDefault()
+ handleSend()
+ }
+ }
+ }
+
+ if (!issue) {
+ return (
+
+
+ )
+}
+
+function ChatMessageBubble({
+ comment,
+ isMine,
+ avatarSrc,
+}: {
+ comment: IssueChatComment
+ isMine: boolean
+ avatarSrc?: string
+}) {
+ const timeStr = formatCommentTime(comment.createdAt)
+
+ if (isMine) {
+ return (
+
+ {displayText}
+ {timeStr}
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {timeStr}
+
+ {comment.author}
+ {' '}
+ (我)
+
+
+
+ {comment.body}
+
+
+ {avatarSrc
+ ? (
+ 
+ )
+ : (
+ '我'
+ )}
+
+
+
+ )
+}
+
+export function IssueChatPanel({
+ issue,
+ me,
+ avatars,
+ onOpenInBrowser,
+}: IssueChatPanelProps) {
+ const [comments, setComments] = useState
+ {avatarSrc
+ ? (
+
+ )
+ : (
+ comment.author.slice(0, 1).toUpperCase()
+ )}
+
+
+
+
+
+ {comment.authorName ? `${comment.authorName} (${comment.author})` : comment.author}
+
+ {timeStr}
+
+
+ {comment.body}
+
+
+ 按方向键或点击卡片查看讨论
+
+ )
+ }
+
+ return (
+
+ {/* 标题栏：对齐 IssueDetailPanel */}
+
+
+
+ {/* 评论消息流 */}
+ + + {issue.source === 'youtrack' ? issue.externalId : `#${issue.number}`} + + {issue.source === 'youtrack' && ( + + YouTrack + + )} + {' '} + {issue.title} +
+ + +
+ {comments.length === 0 && !loading && (
+
+
+ {/* 底部输入栏 */}
+
+
+ )}
+ {comments.map((comment) => {
+ if (comment.systemText) {
+ return
+