Skip to content

Commit 18565b2

Browse files
PavelLaptevPavelLaptev
authored
codegen-ui-updates-11 (#10185)
* smol icon opacity fix * feat(ui): move toolCall name outside loading conditional and remove icon sizes to fix layout shifts * fix(layout): adjust left padding to align tool call icon and text * style(ui): add background color to codegen sidebar entry * refactor(codegen): remove .running color to rely on default styles * update "waiting" animation and related styles
1 parent f90b2e6 commit 18565b2

File tree

8 files changed

+112
-31
lines changed

8 files changed

+112
-31
lines changed

‎apps/desktop/src/components/BranchCard.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@
257257
{#snippet custom()}
258258
<div class="branch-header__ai-pill-label">
259259
<span class="truncate">{descriptor}</span>
260-
<Icon name="draggable" opacity={0.6} />
260+
<Icon name="draggable" opacity={0.8} />
261261
</div>
262262
{/snippet}
263263
</Button>

‎apps/desktop/src/components/codegen/CodegenAssistantMessage.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
align-items: flex-end;
3333
width: 100%;
3434
padding: 8px 0 16px;
35-
gap: 12px;
35+
gap: 14px;
3636
}
3737
3838
.message-content {

‎apps/desktop/src/components/codegen/CodegenServiceMessage.svelte‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<script lang="ts">
22
import { ButPcAvatar } from '@gitbutler/ui';
3-
import { popIn } from '@gitbutler/ui/utils/transitions';
43
import type { Snippet } from 'svelte';
54
65
type Props = {
76
children: Snippet;
87
style: 'neutral' | 'pop' | 'error';
9-
face: 'idle' | 'thinking';
8+
face: 'idle' | 'thinking' | 'waiting';
109
};
1110
1211
const { children, style, face }: Props = $props();
@@ -15,7 +14,10 @@
1514
<div class="service-message__wrapper">
1615
<div class="service-message">
1716
<ButPcAvatar mode={face} />
18-
<div class="service-message__bubble service-message__bubble--{style}" in:popIn>
17+
<div
18+
class="service-message__bubble service-message__bubble--{style} service-message__bubble--animate"
19+
class:service-message__bubble--wiggle={face === 'waiting'}
20+
>
1921
{@render children()}
2022
</div>
2123
</div>
@@ -30,12 +32,12 @@
3032
.service-message {
3133
display: flex;
3234
align-items: flex-end;
33-
gap: 16px;
35+
gap: 14px;
3436
}
3537
.service-message__bubble {
3638
display: flex;
3739
max-width: var(--message-max-width);
38-
padding: 8px 12px;
40+
padding: 10px 12px;
3941
border-radius: var(--radius-ml);
4042
background-color: var(--clr-bg-2);
4143
color: var(--clr-text-2);
@@ -50,4 +52,50 @@
5052
background-color: var(--clr-theme-pop-soft);
5153
color: var(--clr-text-1);
5254
}
55+
56+
.service-message__bubble--animate {
57+
animation: popIn 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s both;
58+
}
59+
60+
.service-message__bubble--wiggle {
61+
animation:
62+
popIn 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s both,
63+
wiggle 5s ease-in-out infinite;
64+
}
65+
66+
@keyframes popIn {
67+
0% {
68+
transform: scale(0.2) translateY(15px) rotate(-8deg);
69+
transform-origin: left bottom;
70+
opacity: 0;
71+
}
72+
100% {
73+
transform: scale(1) translateY(0px) rotate(0deg);
74+
transform-origin: left bottom;
75+
opacity: 1;
76+
}
77+
}
78+
79+
@keyframes wiggle {
80+
0%,
81+
12%,
82+
100% {
83+
transform: translateX(0px) rotate(0deg);
84+
}
85+
2% {
86+
transform: translateX(-3px) rotate(-0.2deg);
87+
}
88+
4% {
89+
transform: translateX(3px) rotate(0.2deg);
90+
}
91+
6% {
92+
transform: translateX(-3px) rotate(-0.2deg);
93+
}
94+
8% {
95+
transform: translateX(3px) rotate(0.2deg);
96+
}
97+
10% {
98+
transform: translateX(0px) rotate(0deg);
99+
}
100+
}
53101
</style>

‎apps/desktop/src/components/codegen/CodegenServiceMessageUseTool.svelte‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,11 @@
6161
});
6262
</script>
6363

64-
<CodegenServiceMessage style="pop" face="idle">
65-
<div class="flex flex-col gap-6">
66-
<p class="text-13 text-semibold">Claude Code wants to {wantsToDo} 👆</p>
67-
<p class="text-13 text-italic">Review the {actionName} above, then approve or reject.</p>
64+
<CodegenServiceMessage style="pop" face="waiting">
65+
<div class="flex flex-col gap-2">
66+
<p class="text-13 text-semibold text-body">Claude Code wants to {wantsToDo} 👆</p>
67+
<p class="text-13 text-italic text-body opacity-60">
68+
Review the {actionName} above, then approve or reject.
69+
</p>
6870
</div>
6971
</CodegenServiceMessage>

‎apps/desktop/src/components/codegen/CodegenSidebarEntry.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@
148148
overflow: hidden;
149149
border: 1px solid var(--clr-border-2);
150150
border-radius: var(--radius-ml);
151+
background-color: var(--clr-bg-1);
151152
}
152153
153154
.codegen-entry-header {
@@ -248,9 +249,6 @@
248249
.vibe-icon {
249250
display: flex;
250251
251-
&.running {
252-
color: var(--clr-theme-pop-element);
253-
}
254252
&.completed {
255253
color: var(--clr-theme-succ-element);
256254
}

‎apps/desktop/src/components/codegen/CodegenToolCall.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@
3333
</div>
3434

3535
{#if toolCallLoading(toolCall)}
36-
<Icon name="spinner" size={14} />
37-
<p>{toolCall.name}</p>
36+
<Icon name="spinner" />
3837
{:else}
39-
<Icon name={getToolIcon(toolCall.name)} size={14} color="var(--clr-text-3)" />
40-
<p class="text-13 text-left full-width">{toolCall.name}</p>
38+
<Icon name={getToolIcon(toolCall.name)} color="var(--clr-text-3)" />
4139
{/if}
4240

41+
<p class="text-13 text-left full-width">{toolCall.name}</p>
42+
4343
{#if requiresApproval}
44-
<div class="flex gap-4">
44+
<div class="flex gap-4 m-left-8">
4545
<AsyncButton
4646
kind="outline"
4747
size="tag"
@@ -94,7 +94,7 @@
9494
display: flex;
9595
position: relative;
9696
align-items: center;
97-
padding: 10px 10px 10px 22px;
97+
padding: 10px 12px 10px 22px;
9898
gap: 8px;
9999
background-color: var(--clr-bg-2);
100100

‎apps/desktop/src/components/codegen/CodegenUserMessage.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
justify-content: flex-end;
3131
width: 100%;
3232
padding: 8px 0 16px;
33-
gap: 8px;
33+
gap: 10px;
3434
}
3535
3636
.message-bubble {

‎packages/ui/src/lib/components/ButPcAvatar.svelte‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
interface Props {
3-
mode?: 'idle' | 'thinking';
3+
mode?: 'idle' | 'thinking' | 'waiting';
44
}
55
66
const { mode = 'idle' }: Props = $props();
@@ -47,11 +47,18 @@
4747
stroke="black"
4848
stroke-width="1.2"
4949
/>
50-
<path
51-
d="M7.55078 16.6064C11.269 19.1174 13.296 19.1056 16.9056 16.6064"
52-
stroke="black"
53-
stroke-width="1.2"
54-
/>
50+
<!-- MOUTH -->
51+
{#if mode === 'thinking' || mode === 'idle'}
52+
<path
53+
class="but-face__mouth-smile"
54+
d="M7.55078 16.6064C11.269 19.1174 13.296 19.1056 16.9056 16.6064"
55+
stroke="black"
56+
stroke-width="1.2"
57+
/>
58+
{:else if mode === 'waiting'}
59+
<path d="M7.99902 18H13.999" stroke="black" stroke-width="1.2" />
60+
{/if}
61+
<!-- EYES -->
5562
<rect
5663
class="but-face__eye but-face__eye--left"
5764
x="8.30078"
@@ -144,16 +151,16 @@
144151
}
145152
}
146153
147-
/* EYE ANIMATIONS */
148154
.but-face__eye {
149155
transform-origin: center;
150156
transition: transform 0.3s ease-in-out;
151157
}
152158
153-
.but-face-wrapper.thinking .but-face__eye {
154-
animation: eyeBlink 3.5s ease-in-out infinite;
159+
.but-face-wrapper.thinking {
160+
.but-face__eye {
161+
animation: eyeBlink 3.5s ease-in-out infinite;
162+
}
155163
}
156-
157164
@keyframes pcBounce {
158165
0%,
159166
100% {
@@ -192,4 +199,30 @@
192199
transform: scaleY(1);
193200
}
194201
}
202+
203+
/* WAITING MODE */
204+
.but-face-wrapper.waiting {
205+
.but-face__eye {
206+
animation: eyeRoll 6s ease-in-out infinite;
207+
}
208+
}
209+
210+
@keyframes eyeRoll {
211+
0%,
212+
30% {
213+
transform: translate(0, 0);
214+
}
215+
35% {
216+
transform: translate(1px, -1px);
217+
}
218+
60% {
219+
transform: translate(1px, -1px);
220+
}
221+
65% {
222+
transform: translate(0, 0);
223+
}
224+
100% {
225+
transform: translate(0, 0);
226+
}
227+
}
195228
</style>

0 commit comments

Comments
 (0)