|
1 | 1 | <script lang="ts"> |
2 | 2 | import { toolCallLoading, type ToolCall } from '$lib/codegen/messages'; |
3 | 3 | import { formatToolCall, getToolIcon } from '$lib/utils/codegenTools'; |
4 | | - import { DropdownButton, ContextMenuItem, Icon } from '@gitbutler/ui'; |
| 4 | + import { DropdownButton, ContextMenuItem, Icon, Select, SelectItem } from '@gitbutler/ui'; |
5 | 5 | import type { PermissionDecision } from '$lib/codegen/types'; |
6 | 6 |
|
7 | 7 | export type RequiresApproval = { |
8 | | - onPermissionDecision: (id: string, decision: PermissionDecision) => Promise<void>; |
| 8 | + onPermissionDecision: ( |
| 9 | + id: string, |
| 10 | + decision: PermissionDecision, |
| 11 | + useWildcard: boolean |
| 12 | + ) => Promise<void>; |
9 | 13 | }; |
10 | 14 |
|
11 | 15 | type Props = { |
|
21 | 25 | let allowDropdownButton = $state<ReturnType<typeof DropdownButton>>(); |
22 | 26 | let denyDropdownButton = $state<ReturnType<typeof DropdownButton>>(); |
23 | 27 |
|
24 | | - // Persisted state for selected permission scopes |
25 | 28 | type AllowDecision = 'allowOnce' | 'allowSession' | 'allowProject' | 'allowAlways'; |
26 | 29 | type DenyDecision = 'denyOnce' | 'denySession' | 'denyProject' | 'denyAlways'; |
| 30 | + type WildcardDecision = 'precise' | 'wild'; |
27 | 31 |
|
28 | 32 | let selectedAllowDecision = $state<AllowDecision>('allowSession'); |
29 | 33 | let selectedDenyDecision = $state<DenyDecision>('denySession'); |
| 34 | + let selectedWildcardDecision = $state<WildcardDecision>('precise'); |
30 | 35 |
|
31 | | - // Labels for each decision type |
32 | 36 | const allowLabels: Record<AllowDecision, string> = { |
33 | 37 | allowOnce: 'Allow once', |
34 | 38 | allowProject: 'Allow this project', |
|
42 | 46 | denyProject: 'Deny this project', |
43 | 47 | denyAlways: 'Deny always' |
44 | 48 | }; |
| 49 | +
|
| 50 | + // The wildcard selector only shows up for certain tool calls |
| 51 | + const wildcardSelector = $derived.by< |
| 52 | + { show: false } | { show: true; options: { label: string; value: WildcardDecision }[] } |
| 53 | + >(() => { |
| 54 | + if (toolCall.name === 'Edit' || toolCall.name === 'Write') { |
| 55 | + return { |
| 56 | + show: true, |
| 57 | + options: [ |
| 58 | + { value: 'precise', label: 'This file' }, |
| 59 | + { value: 'wild', label: 'Any files in the same folder' } |
| 60 | + ] |
| 61 | + }; |
| 62 | + } else if (toolCall.name === 'Bash') { |
| 63 | + return { |
| 64 | + show: true, |
| 65 | + options: [ |
| 66 | + { value: 'precise', label: 'This command' }, |
| 67 | + { value: 'wild', label: 'Any subcommands or flags' } |
| 68 | + ] |
| 69 | + }; |
| 70 | + } else { |
| 71 | + return { show: false }; |
| 72 | + } |
| 73 | + }); |
45 | 74 | </script> |
46 | 75 |
|
47 | 76 | <div class="tool-call {style}" class:full-width={fullWidth}> |
|
55 | 84 | <span class="tool-name text-12">{toolCall.name}</span> |
56 | 85 |
|
57 | 86 | <span class="summary truncate grow clr-text-2">{formatToolCall(toolCall)}</span> |
| 87 | + </div> |
58 | 88 |
|
59 | | - {#if requiresApproval} |
60 | | - <div class="flex gap-4 m-l-8"> |
61 | | - <DropdownButton |
62 | | - bind:this={denyDropdownButton} |
63 | | - style="error" |
64 | | - kind="outline" |
65 | | - onclick={async () => { |
66 | | - await requiresApproval.onPermissionDecision(toolCall.id, selectedDenyDecision); |
67 | | - denyDropdownButton?.close(); |
| 89 | + {#if requiresApproval} |
| 90 | + <div class="flex gap-4"> |
| 91 | + {#if wildcardSelector.show} |
| 92 | + <Select |
| 93 | + value={selectedWildcardDecision} |
| 94 | + options={wildcardSelector.options} |
| 95 | + wide |
| 96 | + onselect={(value) => { |
| 97 | + selectedWildcardDecision = value as WildcardDecision; |
68 | 98 | }} |
69 | 99 | > |
70 | | - {denyLabels[selectedDenyDecision]} |
71 | | - {#snippet contextMenuSlot()} |
72 | | - <ContextMenuItem |
73 | | - label="Deny once" |
74 | | - onclick={() => { |
75 | | - selectedDenyDecision = 'denyOnce'; |
76 | | - denyDropdownButton?.close(); |
77 | | - }} |
78 | | - /> |
79 | | - <ContextMenuItem |
80 | | - label="Deny in this session" |
81 | | - onclick={() => { |
82 | | - selectedDenyDecision = 'denySession'; |
83 | | - denyDropdownButton?.close(); |
84 | | - }} |
85 | | - /> |
86 | | - <ContextMenuItem |
87 | | - label="Deny in this project" |
88 | | - onclick={() => { |
89 | | - selectedDenyDecision = 'denyProject'; |
90 | | - denyDropdownButton?.close(); |
91 | | - }} |
92 | | - /> |
93 | | - <ContextMenuItem |
94 | | - label="Deny always" |
95 | | - onclick={() => { |
96 | | - selectedDenyDecision = 'denyAlways'; |
97 | | - denyDropdownButton?.close(); |
98 | | - }} |
99 | | - /> |
| 100 | + {#snippet itemSnippet({ item, highlighted })} |
| 101 | + <SelectItem selected={item.value === selectedWildcardDecision} {highlighted}> |
| 102 | + {item.label} |
| 103 | + </SelectItem> |
100 | 104 | {/snippet} |
101 | | - </DropdownButton> |
102 | | - <DropdownButton |
103 | | - bind:this={allowDropdownButton} |
104 | | - style="pop" |
105 | | - onclick={async () => { |
106 | | - await requiresApproval.onPermissionDecision(toolCall.id, selectedAllowDecision); |
107 | | - allowDropdownButton?.close(); |
108 | | - }} |
109 | | - > |
110 | | - {allowLabels[selectedAllowDecision]} |
111 | | - {#snippet contextMenuSlot()} |
112 | | - <ContextMenuItem |
113 | | - label="Allow once" |
114 | | - onclick={() => { |
115 | | - selectedAllowDecision = 'allowOnce'; |
116 | | - allowDropdownButton?.close(); |
117 | | - }} |
118 | | - /> |
119 | | - <ContextMenuItem |
120 | | - label="Allow in this session" |
121 | | - onclick={() => { |
122 | | - selectedAllowDecision = 'allowSession'; |
123 | | - allowDropdownButton?.close(); |
124 | | - }} |
125 | | - /> |
126 | | - <ContextMenuItem |
127 | | - label="Allow in this project" |
128 | | - onclick={() => { |
129 | | - selectedAllowDecision = 'allowProject'; |
130 | | - allowDropdownButton?.close(); |
131 | | - }} |
132 | | - /> |
133 | | - <ContextMenuItem |
134 | | - label="Allow always" |
135 | | - onclick={() => { |
136 | | - selectedAllowDecision = 'allowAlways'; |
137 | | - allowDropdownButton?.close(); |
138 | | - }} |
139 | | - /> |
140 | | - {/snippet} |
141 | | - </DropdownButton> |
142 | | - </div> |
143 | | - {/if} |
144 | | - </div> |
| 105 | + </Select> |
| 106 | + {/if} |
| 107 | + |
| 108 | + <DropdownButton |
| 109 | + bind:this={denyDropdownButton} |
| 110 | + style="error" |
| 111 | + kind="outline" |
| 112 | + onclick={async () => { |
| 113 | + await requiresApproval.onPermissionDecision( |
| 114 | + toolCall.id, |
| 115 | + selectedDenyDecision, |
| 116 | + selectedWildcardDecision === 'wild' |
| 117 | + ); |
| 118 | + denyDropdownButton?.close(); |
| 119 | + }} |
| 120 | + > |
| 121 | + {denyLabels[selectedDenyDecision]} |
| 122 | + {#snippet contextMenuSlot()} |
| 123 | + <ContextMenuItem |
| 124 | + label="Deny once" |
| 125 | + onclick={() => { |
| 126 | + selectedDenyDecision = 'denyOnce'; |
| 127 | + denyDropdownButton?.close(); |
| 128 | + }} |
| 129 | + /> |
| 130 | + <ContextMenuItem |
| 131 | + label="Deny in this session" |
| 132 | + onclick={() => { |
| 133 | + selectedDenyDecision = 'denySession'; |
| 134 | + denyDropdownButton?.close(); |
| 135 | + }} |
| 136 | + /> |
| 137 | + <ContextMenuItem |
| 138 | + label="Deny in this project" |
| 139 | + onclick={() => { |
| 140 | + selectedDenyDecision = 'denyProject'; |
| 141 | + denyDropdownButton?.close(); |
| 142 | + }} |
| 143 | + /> |
| 144 | + <ContextMenuItem |
| 145 | + label="Deny always" |
| 146 | + onclick={() => { |
| 147 | + selectedDenyDecision = 'denyAlways'; |
| 148 | + denyDropdownButton?.close(); |
| 149 | + }} |
| 150 | + /> |
| 151 | + {/snippet} |
| 152 | + </DropdownButton> |
| 153 | + <DropdownButton |
| 154 | + bind:this={allowDropdownButton} |
| 155 | + style="pop" |
| 156 | + onclick={async () => { |
| 157 | + await requiresApproval.onPermissionDecision( |
| 158 | + toolCall.id, |
| 159 | + selectedAllowDecision, |
| 160 | + selectedWildcardDecision === 'wild' |
| 161 | + ); |
| 162 | + allowDropdownButton?.close(); |
| 163 | + }} |
| 164 | + > |
| 165 | + {allowLabels[selectedAllowDecision]} |
| 166 | + {#snippet contextMenuSlot()} |
| 167 | + <ContextMenuItem |
| 168 | + label="Allow once" |
| 169 | + onclick={() => { |
| 170 | + selectedAllowDecision = 'allowOnce'; |
| 171 | + allowDropdownButton?.close(); |
| 172 | + }} |
| 173 | + /> |
| 174 | + <ContextMenuItem |
| 175 | + label="Allow in this session" |
| 176 | + onclick={() => { |
| 177 | + selectedAllowDecision = 'allowSession'; |
| 178 | + allowDropdownButton?.close(); |
| 179 | + }} |
| 180 | + /> |
| 181 | + <ContextMenuItem |
| 182 | + label="Allow in this project" |
| 183 | + onclick={() => { |
| 184 | + selectedAllowDecision = 'allowProject'; |
| 185 | + allowDropdownButton?.close(); |
| 186 | + }} |
| 187 | + /> |
| 188 | + <ContextMenuItem |
| 189 | + label="Allow always" |
| 190 | + onclick={() => { |
| 191 | + selectedAllowDecision = 'allowAlways'; |
| 192 | + allowDropdownButton?.close(); |
| 193 | + }} |
| 194 | + /> |
| 195 | + {/snippet} |
| 196 | + </DropdownButton> |
| 197 | + </div> |
| 198 | + {/if} |
145 | 199 | </div> |
146 | 200 |
|
147 | 201 | <style lang="postcss"> |
|
153 | 207 |
|
154 | 208 | padding: 1px 32px 1px 12px; |
155 | 209 | overflow: hidden; |
| 210 | +
|
| 211 | + gap: 12px; |
156 | 212 | user-select: text; |
157 | 213 |
|
158 | 214 | &:not(.full-width) { |
|
0 commit comments