Skip to content

Commit 8770324

Browse files
ctecte
committed
Render Markdown in task header
1 parent 664d5b1 commit 8770324

File tree

10 files changed

+551
-483
lines changed

10 files changed

+551
-483
lines changed

‎webview-ui/src/components/chat/TaskHeader.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import { ClineMessage } from "@roo/shared/ExtensionMessage"
88

99
import { getMaxTokensForModel } from "@src/utils/model-utils"
1010
import { formatLargeNumber } from "@src/utils/format"
11+
import { useExtensionState } from "@src/context/ExtensionStateContext"
12+
import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
1113
import { cn } from "@src/lib/utils"
1214
import { Button } from "@src/components/ui"
13-
import { useExtensionState } from "@src/context/ExtensionStateContext"
14-
import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
15+
import { MarkdownBlock } from "@src/components/common/MarkdownBlock"
1516

1617
import Thumbnails from "../common/Thumbnails"
1718

@@ -115,7 +116,7 @@ const TaskHeader = ({
115116
WebkitLineClamp: "unset",
116117
WebkitBoxOrient: "vertical",
117118
}}>
118-
<Mention text={task.text} />
119+
<MarkdownBlock markdown={task.text} renderMentions />
119120
</div>
120121
</div>
121122
{task.images && task.images.length > 0 && <Thumbnails images={task.images} />}

‎webview-ui/src/components/common/CodeBlock.styles.ts‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import styled from "styled-components"
2+
3+
export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
4+
5+
const WRAPPER_ALPHA = "cc"
6+
7+
export const ButtonIcon = styled.span`
8+
display: inline-block;
9+
width: 1.2em;
10+
text-align: center;
11+
vertical-align: middle;
12+
`
13+
14+
export const CodeBlockButton = styled.button`
15+
background: transparent;
16+
border: none;
17+
color: var(--vscode-foreground);
18+
cursor: var(--copy-button-cursor, default);
19+
padding: 4px;
20+
margin: 0 0px;
21+
display: flex;
22+
align-items: center;
23+
opacity: 0.4;
24+
border-radius: 3px;
25+
pointer-events: var(--copy-button-events, none);
26+
margin-left: 4px;
27+
height: 24px;
28+
29+
&:hover {
30+
background: var(--vscode-toolbar-hoverBackground);
31+
opacity: 1;
32+
}
33+
`
34+
35+
export const CodeBlockButtonWrapper = styled.div`
36+
position: fixed;
37+
top: var(--copy-button-top);
38+
right: var(--copy-button-right, 8px);
39+
height: auto;
40+
z-index: 100;
41+
background: ${CODE_BLOCK_BG_COLOR}${WRAPPER_ALPHA};
42+
overflow: visible;
43+
pointer-events: none;
44+
opacity: var(--copy-button-opacity, 0);
45+
padding: 4px 6px;
46+
border-radius: 3px;
47+
display: inline-flex;
48+
align-items: center;
49+
justify-content: center;
50+
51+
&:hover {
52+
background: var(--vscode-editor-background);
53+
opacity: 1 !important;
54+
}
55+
56+
${CodeBlockButton} {
57+
position: relative;
58+
top: 0;
59+
right: 0;
60+
}
61+
`
62+
63+
export const CodeBlockContainer = styled.div`
64+
position: relative;
65+
overflow: hidden;
66+
border-bottom: 4px solid var(--vscode-sideBar-background);
67+
background-color: ${CODE_BLOCK_BG_COLOR};
68+
69+
${CodeBlockButtonWrapper} {
70+
opacity: 0;
71+
pointer-events: none;
72+
transition: opacity 0.2s; /* Keep opacity transition for buttons */
73+
}
74+
75+
&[data-partially-visible="true"]:hover ${CodeBlockButtonWrapper} {
76+
opacity: 1;
77+
pointer-events: all;
78+
cursor: pointer;
79+
}
80+
`
81+
82+
export const StyledPre = styled.div<{
83+
preStyle?: React.CSSProperties
84+
wordwrap?: "true" | "false" | undefined
85+
windowshade?: "true" | "false"
86+
collapsedHeight?: number
87+
}>`
88+
background-color: ${CODE_BLOCK_BG_COLOR};
89+
max-height: ${({ windowshade, collapsedHeight = 500 }) =>
90+
windowshade === "true" ? `${collapsedHeight}px` : "none"};
91+
overflow-y: auto;
92+
padding: 10px;
93+
border-radius: 5px;
94+
${({ preStyle }) => preStyle && { ...preStyle }}
95+
96+
pre {
97+
background-color: ${CODE_BLOCK_BG_COLOR};
98+
border-radius: 5px;
99+
margin: 0;
100+
padding: 10px;
101+
width: 100%;
102+
box-sizing: border-box;
103+
}
104+
105+
pre,
106+
code {
107+
/* Undefined wordwrap defaults to true (pre-wrap) behavior */
108+
white-space: ${({ wordwrap }) => (wordwrap === "false" ? "pre" : "pre-wrap")};
109+
word-break: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "normal")};
110+
overflow-wrap: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "break-word")};
111+
font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px));
112+
font-family: var(--vscode-editor-font-family);
113+
}
114+
115+
pre > code {
116+
.hljs-deletion {
117+
background-color: var(--vscode-diffEditor-removedTextBackground);
118+
display: inline-block;
119+
width: 100%;
120+
}
121+
.hljs-addition {
122+
background-color: var(--vscode-diffEditor-insertedTextBackground);
123+
display: inline-block;
124+
width: 100%;
125+
}
126+
}
127+
128+
.hljs {
129+
color: var(--vscode-editor-foreground, #fff);
130+
background-color: ${CODE_BLOCK_BG_COLOR};
131+
}
132+
`
133+
134+
export const LanguageSelect = styled.select`
135+
font-size: 12px;
136+
color: var(--vscode-foreground);
137+
opacity: 0.4;
138+
font-family: monospace;
139+
appearance: none;
140+
background: transparent;
141+
border: none;
142+
cursor: pointer;
143+
padding: 4px;
144+
margin: 0;
145+
vertical-align: middle;
146+
height: 24px;
147+
148+
& option {
149+
background: var(--vscode-editor-background);
150+
color: var(--vscode-foreground);
151+
padding: 0;
152+
margin: 0;
153+
}
154+
155+
&::-webkit-scrollbar {
156+
width: 6px;
157+
}
158+
159+
&::-webkit-scrollbar-thumb {
160+
background: var(--vscode-scrollbarSlider-background);
161+
}
162+
163+
&::-webkit-scrollbar-track {
164+
background: var(--vscode-editor-background);
165+
}
166+
167+
&:hover {
168+
opacity: 1;
169+
background: var(--vscode-toolbar-hoverBackground);
170+
border-radius: 3px;
171+
}
172+
173+
&:focus {
174+
opacity: 1;
175+
outline: none;
176+
border-radius: 3px;
177+
}
178+
`

0 commit comments

Comments
 (0)