Skip to content

Commit 1fb2a9b

Browse files
lucas77778lucas77778
authored
fix(ui): use official agent icons (#475)
1 parent 5d2e3a4 commit 1fb2a9b

3 files changed

Lines changed: 28 additions & 7 deletions

File tree

‎packages/presentation/ui/src/agent-meta.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const AGENT_LABELS: Record<AgentKind, string> = {
99
'grok-build': 'Grok Build',
1010
};
1111

12-
// Fallback for kinds without a brand glyph (e.g. `pi`, `grok-build`).
12+
// Safety fallback if an icon renderer cannot provide a brand glyph.
1313
export const AGENT_INITIALS: Record<AgentKind, string> = {
1414
'claude-code': 'CC',
1515
codex: 'CX',

‎packages/presentation/ui/src/chat/agent-icon.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,44 @@
11
/// <reference types="unplugin-icons/types/react" />
22
import type { AgentKind } from '@linkcode/schema';
3+
import ClaudeGlyph from '~icons/lobe-icons/claude';
34
import ClaudeColorGlyph from '~icons/lobe-icons/claude-color';
4-
import ClaudeCodeGlyph from '~icons/lobe-icons/claudecode';
55
import CodexGlyph from '~icons/lobe-icons/codex';
66
import CodexColorGlyph from '~icons/lobe-icons/codex-color';
7+
import GrokGlyph from '~icons/lobe-icons/grok';
78
import OpenCodeGlyph from '~icons/lobe-icons/opencode';
89
import { AGENT_INITIALS } from '../agent-meta';
910
import { cn } from '../lib/cn';
1011

1112
export { AGENT_LABELS } from '../agent-meta';
1213

13-
const AGENT_GLYPHS: Partial<Record<AgentKind, typeof ClaudeCodeGlyph>> = {
14-
'claude-code': ClaudeCodeGlyph,
14+
type AgentGlyph = React.ComponentType<React.SVGProps<SVGSVGElement>>;
15+
16+
const AGENT_GLYPHS: Partial<Record<AgentKind, AgentGlyph>> = {
17+
'claude-code': ClaudeGlyph,
1518
codex: CodexGlyph,
19+
'grok-build': GrokGlyph,
1620
opencode: OpenCodeGlyph,
21+
pi: PiGlyph,
1722
};
1823

19-
const AGENT_COLOR_GLYPHS: Partial<Record<AgentKind, typeof ClaudeColorGlyph>> = {
24+
const AGENT_COLOR_GLYPHS: Partial<Record<AgentKind, AgentGlyph>> = {
2025
'claude-code': ClaudeColorGlyph,
2126
codex: CodexColorGlyph,
2227
};
2328

29+
function PiGlyph(props: React.SVGProps<SVGSVGElement>): React.ReactNode {
30+
return (
31+
<svg viewBox="0 0 800 800" {...props}>
32+
<path
33+
d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"
34+
fill="currentColor"
35+
fillRule="evenodd"
36+
/>
37+
<path d="M517.36 400H634.72V634.72H517.36Z" fill="currentColor" />
38+
</svg>
39+
);
40+
}
41+
2442
export function AgentIcon({
2543
kind,
2644
variant = 'solid',

‎packages/presentation/ui/src/native/agent-icon.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@ import { Text, View } from 'react-native';
44
import Svg, { Path } from 'react-native-svg';
55
import { AGENT_INITIALS } from '../agent-meta';
66

7-
// SVG path data extracted from @proj-airi/lobe-icons (24×24 viewBox, evenodd fill);
7+
// Official monochrome agent marks normalized to a 24×24 viewBox;
88
// keep in sync with the web glyph set in chat/agent-icon.tsx.
99
const GLYPH_PATHS: Partial<Record<AgentKind, string>> = {
1010
'claude-code':
11-
'M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z',
11+
'M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z',
1212
codex:
1313
'M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z',
14+
'grok-build':
15+
'M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815',
1416
opencode: 'M16 6H8v12h8V6zm4 16H4V2h16v20z',
17+
pi: 'M4.9587 4.9587H15.5208V12H12V15.5208H8.4795V19.0416H4.9587ZM8.4795 8.4795V12H12V8.4795ZM15.5208 12H19.0416V19.0416H15.5208Z',
1518
};
1619

1720
export interface AgentIconProps {

0 commit comments

Comments
 (0)