Function MessageCard

ai-code-studio/src/components/ConversationPane.tsx:70–122

({ entry }: { entry: FeedEntry })

}

function MessageCard({ entry }: { entry: FeedEntry }) {
  const isPending = entry.id.startsWith('pending-');
  if (entry.feedType === 'user') {
    return (
      <div className="ml-auto flex max-w-[58%] justify-end">
        <div className={[
          'rounded-[18px] border border-[#E4DACB] bg-[#EFE8DD] px-4 py-3 shadow-[0_10px_28px_rgba(74,57,28,0.06)]',
          isPending ? 'opacity-70' : '',
        ].join(' ')}>
          <div className="mb-1 text-[11px] text-[#9A8F80]">你</div>
          <div className="whitespace-pre-wrap break-words text-[15px] leading-7 text-[#332C24]">
            {trimText(entry.content)}
          </div>
        </div>
      </div>
    );
  }

  if (entry.feedType === 'assistant' && entry.isError) {
    const issue = describeIssue(entry.content);

    return (
      <div className="max-w-[82%]">
        <div className="mb-2 text-[11px] text-[#9A8F80]">
          助手
          {entry.timestamp ? ` - ${formatTimestamp(entry.timestamp)}` : ''}
        </div>
        <div className={['rounded-[20px] border px-4 py-4', issueToneClass(issue.tone)].join(' ')}>
          <div className="text-[15px] font-semibold">{issue.title}</div>
          <div className="mt-2 text-[14px] leading-7">{issue.detail}</div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-[82%]">
      <div className="mb-2 text-[11px] text-[#9A8F80]">
        {entry.feedType === 'assistant' ? '助手' : entry.title}
        {entry.timestamp ? ` - ${formatTimestamp(entry.timestamp)}` : ''}
      </div>
      <div className="whitespace-pre-wrap break-words text-[15px] leading-8 text-[#2C241C]">
        {trimText(entry.content)}
      </div>
      {entry.feedType === 'assistant' && entry.streaming ? (
        <div className="mt-3 flex items-center gap-2 text-[14px] italic text-[#C06B47]">
          <span className="h-1 w-1 rounded-full bg-current" />
          正在生成……
        </div>
      ) : null}
    </div>
  );
}

function toolIcon(name?: string) {
  const n = (name || '').toLowerCase();