warning icon

This commit is contained in:
mp 2024-12-22 02:07:26 -08:00
parent 6630d596f6
commit 8456f979ba
3 changed files with 50 additions and 29 deletions

View file

@ -94,45 +94,46 @@ export const IconWarning = ({ size, className = '' }: { size: number, className?
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 24 24"
viewBox="0 0 16 16"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
>
{/* Warning triangle */}
<path d="M12 3L2 21h20L12 3zm0 3.3L19.3 19H4.7L12 6.3z" />
{/* Exclamation mark */}
<rect x="11" y="10" width="2" height="6" />
<circle cx="12" cy="18" r="1" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28L2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z"
/>
</svg>
);
};
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
const DEFAULT_BUTTON_SIZE = 20;
export const ButtonSubmit = ({ className, disabled, ...props }: ButtonProps & Required<Pick<ButtonProps, 'disabled'>>) => {
return <button
className={`size-[20px] rounded-full shrink-0 grow-0 cursor-pointer
className={`rounded-full shrink-0 grow-0 cursor-pointer
${disabled ? 'bg-vscode-disabled-fg' : 'bg-white'}
${className}
`}
type='submit'
{...props}
>
<IconArrowUp size={20} className="stroke-[2]" />
<IconArrowUp size={DEFAULT_BUTTON_SIZE} className="stroke-[2]" />
</button>
}
export const ButtonStop = ({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => {
return <button
className={`size-[20px] rounded-full bg-white cursor-pointer flex items-center justify-center
className={`rounded-full bg-white shrink-0 grow-0 cursor-pointer flex items-center justify-center
${className}
`}
type='button'
{...props}
>
<IconSquare size={10} className="stroke-[2]" />
<IconSquare size={DEFAULT_BUTTON_SIZE} className="stroke-[2] p-[7px]" />
</button>
}

View file

@ -9,7 +9,7 @@ import { useSettingsState, useRefreshModelState, useAccessor } from '../util/ser
import { VoidSelectBox } from '../util/inputs.js'
import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'
import { IconWarning } from '../sidebar-tsx/SidebarChat.js'
import { OPEN_VOID_SETTINGS_ACTION_ID } from '../../../voidSettingsPane.js'
const ModelSelectBox = ({ featureName }: { featureName: FeatureName }) => {
const accessor = useAccessor()
@ -44,12 +44,29 @@ const ModelSelectBox = ({ featureName }: { featureName: FeatureName }) => {
const DummySelectBox = () => {
return <div>
const accessor = useAccessor()
const comandService = accessor.get('ICommandService')
const openSettings = () => {
comandService.executeCommand(OPEN_VOID_SETTINGS_ACTION_ID);
};
return <div
className={`
flex items-center
flex-nowrap text-ellipsis
text-vscode-charts-yellow
hover:brightness-110 transition-all duration-200
min-w-[120px]
cursor-pointer
`}
onClick={openSettings}
>
<IconWarning
size={24}
className='text-orange-900'
size={20}
className='mr-1 brightness-90'
/>
<span className='text-orange-900'>Add a model</span>
<span>Model required</span>
</div>
// return <VoidSelectBox
// options={[{ text: 'Please add a model!', value: null }]}

View file

@ -41,18 +41,18 @@ module.exports = {
"input-fg": "var(--vscode-input-foreground)",
"input-placeholder-fg": "var(--vscode-placeholderForeground)",
"input-active-bg": "var(--vscode-activeBackground)",
"input-option-active-border": "var(--vscode-activeBorder)",
"input-option-active-fg": "var(--vscode-activeForeground)",
"input-option-hover-bg": "var(--vscode-hoverBackground)",
"input-validation-error-bg": "var(--vscode-errorBackground)",
"input-validation-error-fg": "var(--vscode-errorForeground)",
"input-validation-error-border": "var(--vscode-errorBorder)",
"input-validation-info-bg": "var(--vscode-infoBackground)",
"input-validation-info-fg": "var(--vscode-infoForeground)",
"input-validation-info-border": "var(--vscode-infoBorder)",
"input-validation-warning-bg": "var(--vscode-warningBackground)",
"input-validation-warning-fg": "var(--vscode-warningForeground)",
"input-validation-warning-border": "var(--vscode-warningBorder)",
"input-option-active-border": "var(--vscode-inputOption-activeBorder)",
"input-option-active-fg": "var(--vscode-inputOption-activeForeground)",
"input-option-hover-bg": "var(--vscode-inputOption-hoverBackground)",
"input-validation-error-bg": "var(--vscode-inputValidation-errorBackground)",
"input-validation-error-fg": "var(--vscode-inputValidation-errorForeground)",
"input-validation-error-border": "var(--vscode-inputValidation-errorBorder)",
"input-validation-info-bg": "var(--vscode-inputValidation-infoBackground)",
"input-validation-info-fg": "var(--vscode-inputValidation-infoForeground)",
"input-validation-info-border": "var(--vscode-inputValidation-infoBorder)",
"input-validation-warning-bg": "var(--vscode-inputValidation-warningBackground)",
"input-validation-warning-fg": "var(--vscode-inputValidation-warningForeground)",
"input-validation-warning-border": "var(--vscode-inputValidation-warningBorder)",
// command center colors (the top bar)
"commandcenter-fg": "var(--vscode-commandCenter-foreground)",
@ -107,11 +107,14 @@ module.exports = {
"editor-bg": "var(--vscode-editor-background)",
"editor-fg": "var(--vscode-editor-foreground)",
// editorwidget colors
// editor widget colors
"editorwidget-fg": "var(--vscode-editorWidget-foreground)",
"editorwidget-bg": "var(--vscode-editorWidget-background)",
"editorwidget-border": "var(--vscode-editorWidget-border)",
// other
"charts-orange": "var(--vscode-charts-orange)",
"charts-yellow": "var(--vscode-charts-yellow)",
},
},
},