Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { AskResponseRequest } from "@shared/proto/cline/task"
import styled from "styled-components"
import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
import { TaskServiceClient } from "@/services/grpc-client"
const OptionButton = styled.button<{ isSelected?: boolean; isNotSelectable?: boolean }>`
padding: 8px 12px;
background: ${(props) => (props.isSelected ? "var(--vscode-focusBorder)" : CODE_BLOCK_BG_COLOR)};
color: ${(props) => (props.isSelected ? "white" : "var(--vscode-input-foreground)")};
border: 1px solid var(--vscode-editorGroup-border);
border-radius: 2px;
cursor: ${(props) => (props.isNotSelectable ? "default" : "pointer")};
text-align: left;
font-size: 12px;
${(props) =>
!props.isNotSelectable &&
`
&:hover {
background: var(--vscode-focusBorder);
color: white;
}
`}
`
export const OptionsButtons = ({
options,
selected,
isActive,
inputValue,
}: {
options?: string[]
selected?: string
isActive?: boolean
inputValue?: string
}) => {
if (!options?.length) {
return null
}
const hasSelected = selected !== undefined && options.includes(selected)
return (
<div
style={{
display: "flex",
flexDirection: "column",
gap: "8px",
paddingTop: 15,
// marginTop: "22px",
}}>
{/* <div style={{ color: "var(--vscode-descriptionForeground)", fontSize: "11px", textTransform: "uppercase" }}>
SELECT ONE:
</div> */}
{options.map((option, index) => (
<OptionButton
className="options-button"
id={`options-button-${index}`}
isNotSelectable={hasSelected || !isActive}
isSelected={option === selected}
key={index}
onClick={async () => {
if (hasSelected || !isActive) {
return
}
try {
await TaskServiceClient.askResponse(
AskResponseRequest.create({
responseType: "messageResponse",
text: option + (inputValue ? `: ${inputValue?.trim()}` : ""),
images: [],
}),
)
} catch (error) {
console.error("Error sending option response:", error)
}
}}>
<span className="ph-no-capture">{option}</span>
</OptionButton>
))}
</div>
)
}
|