Skip to content

Commit 74a0fe6

Browse files
zenyrzenyr
committed
fix(tweak): Tweak designs
1 parent 4a55d94 commit 74a0fe6

File tree

7 files changed

+179
-100
lines changed

7 files changed

+179
-100
lines changed

‎src/App.tsx

+65-68
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
Transition,
88
createEmotionCache,
99
} from "@mantine/core";
10-
import { useViewportSize } from "@mantine/hooks";
1110
import { Notifications } from "@mantine/notifications";
1211
import { useEffect, useMemo, useState } from "react";
1312
import Balancer from "react-wrap-balancer";
@@ -31,87 +30,85 @@ export const App = () => {
3130
const [colorScheme, setTheme] = useCgptColorScheme();
3231

3332
const [mounted, setMounted] = useState(false);
34-
const isWide = useViewportSize().width > 600;
3533
const [tgt, __html] = useRootAnchor();
3634

37-
const { width } = useElsUpdater(); // updates els on mutation
35+
const { width, height } = useElsUpdater(); // updates els on mutation
36+
const isWide = width > 600;
3837
const wrapperStyle = useMemo(
3938
() =>
4039
({
41-
width,
4240
userSelect: "none",
43-
backdropFilter: "blur(3px)",
44-
position: "relative",
45-
41+
position: "absolute",
42+
bottom: 0,
43+
left: 0,
44+
right: 0,
4645
zIndex: 1,
47-
background:
48-
colorScheme === "dark"
49-
? "rgb(52, 53, 64 , 0.5)"
50-
: "rgb(255, 255, 255, 0.5)",
5146
} as const),
52-
[colorScheme, width]
47+
[]
5348
);
5449
useEffect(() => {
5550
setMounted(false);
5651
setTimeout(() => setMounted(true), 100);
5752
}, [tgt]);
5853
return (
59-
<ColorSchemeProvider
60-
colorScheme={colorScheme}
61-
toggleColorScheme={(theme) =>
62-
setTheme(theme || ("system" as unknown as "light"))
63-
}
64-
>
65-
<MantineProvider emotionCache={cache} theme={{ colorScheme }}>
66-
<Group style={wrapperStyle} align="center" position="center">
67-
<Transition
68-
mounted={!!width && mounted}
69-
transition="pop"
70-
duration={500}
71-
exitDuration={100}
72-
timingFunction="ease"
73-
keepMounted
74-
>
75-
{(styles) => (
76-
<Group
77-
style={styles}
78-
spacing="xs"
79-
align="center"
80-
position="center"
81-
className="cgpt-agmt"
82-
noWrap
83-
>
84-
<Tooltip
85-
label={
86-
<Text
87-
component={Balancer}
88-
size="xs"
89-
dangerouslySetInnerHTML={{ __html }}
90-
/>
91-
}
92-
styles={{
93-
tooltip: { maxWidth: "90vw", whiteSpace: "pre-wrap" },
94-
}}
95-
withArrow
96-
withinPortal
54+
<div style={{ width, height, position: "relative" }}>
55+
<ColorSchemeProvider
56+
colorScheme={colorScheme}
57+
toggleColorScheme={(theme) =>
58+
setTheme(theme || ("system" as unknown as "light"))
59+
}
60+
>
61+
<MantineProvider emotionCache={cache} theme={{ colorScheme }}>
62+
<Group style={wrapperStyle} align="center" position="center">
63+
<Transition
64+
mounted={!!width && mounted}
65+
transition="pop"
66+
duration={500}
67+
exitDuration={100}
68+
timingFunction="ease"
69+
keepMounted
70+
>
71+
{(styles) => (
72+
<Group
73+
style={styles}
74+
spacing="xs"
75+
align="center"
76+
position="center"
77+
className="cgpt-agmt"
78+
noWrap
9779
>
98-
<Text variant="gradient" size="sm">
99-
{isWide && `ChatGPT Augment `}v{version}
100-
</Text>
101-
</Tooltip>
102-
<ContinueWorker />
103-
<ClickThrougher />
104-
<TextAreaAugmenter />
105-
<ConversationMenu />
106-
<MessageSerializer />
107-
<CoderModal2 />
108-
{/* BUTTONS / UI HERE */}
109-
</Group>
110-
)}
111-
</Transition>
112-
<Notifications position="top-right" />
113-
</Group>
114-
</MantineProvider>
115-
</ColorSchemeProvider>
80+
<Tooltip
81+
label={
82+
<Text
83+
component={Balancer}
84+
size="xs"
85+
dangerouslySetInnerHTML={{ __html }}
86+
/>
87+
}
88+
styles={{
89+
tooltip: { maxWidth: "90vw", whiteSpace: "pre-wrap" },
90+
}}
91+
withArrow
92+
withinPortal
93+
>
94+
<Text variant="gradient" size="sm">
95+
{isWide && `ChatGPT Augment `}v{version}
96+
</Text>
97+
</Tooltip>
98+
<ContinueWorker />
99+
<ClickThrougher />
100+
<TextAreaAugmenter />
101+
<ConversationMenu />
102+
<MessageSerializer />
103+
<CoderModal2 />
104+
{/* BUTTONS / UI HERE */}
105+
</Group>
106+
)}
107+
</Transition>
108+
<Notifications position="top-right" />
109+
</Group>
110+
</MantineProvider>
111+
</ColorSchemeProvider>
112+
</div>
116113
);
117114
};

‎src/comp/coder2/Prepare.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { CoderLanguageSelector } from "./Languages";
1414

1515
export const Coder2Prepare = () => {
1616
const [isChatNew, isChatGpt4] = store((s) => [
17-
!s.container.conversations?.length,
18-
s.button.gptActive === s.button.gpt4,
17+
!s.container.conversations?.length && !!s.button.gptActive,
18+
!!(s.button.gptActive && s.button.gptActive === s.button.gpt4),
1919
]);
2020
const [handlers, prepareValues, prepared, questionCount, appName, language] =
2121
useCoder((s) => [

‎src/comp/workers/ContinueClicker.tsx

+53-15
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,68 @@
11
import { useContinueClicker } from "@/lib/hooks/workers/useContinueClicker";
2-
import { Portal } from "@mantine/core";
3-
import { IconPlayerStop, IconPlayerTrackNext } from "@tabler/icons-react";
2+
import { Portal, Tooltip } from "@mantine/core";
3+
import { useViewportSize } from "@mantine/hooks";
4+
import {
5+
IconMessageBolt,
6+
IconPlayerStop,
7+
IconPlayerTrackNext,
8+
} from "@tabler/icons-react";
49

510
export const ContinueWorker = () => {
6-
const [seconds, stop, node, container] = useContinueClicker();
11+
const {
12+
secondsText,
13+
handleStop,
14+
handleForceContinue,
15+
node,
16+
container,
17+
active,
18+
isStreaming,
19+
className,
20+
} = useContinueClicker();
21+
const isNarrow = useViewportSize().width <= 768;
22+
const stroke = isNarrow ? 2 : 1;
723
return (
824
<>
925
{node ? (
1026
<Portal target={node}>
1127
<div className="flex w-full gap-2 items-center justify-center">
12-
<IconPlayerTrackNext stroke={1} size={16} />
13-
{seconds}
28+
<IconPlayerTrackNext stroke={stroke} size={16} />
29+
<span style={{ display: !isNarrow ? "inline" : "none" }}>
30+
Continue{active && " in "}
31+
</span>
32+
<span
33+
style={{
34+
display: active || !isNarrow ? "inline" : "none",
35+
fontFamily: "monospace",
36+
}}
37+
>
38+
{secondsText}
39+
</span>
1440
</div>
1541
</Portal>
1642
) : null}
1743
{container ? (
18-
<Portal target={container}>
19-
<button
20-
className="btn relative btn-neutral -z-0 border-0 md:border"
21-
onClick={stop}
22-
>
23-
<div className="flex w-full gap-2 items-center justify-center">
24-
<IconPlayerStop stroke={1} size={16} />
25-
Stop
26-
</div>
27-
</button>
44+
<Portal target={container} style={{ height: "100%", display: "flex" }}>
45+
{active ? (
46+
<button className={className} onClick={handleStop}>
47+
<div className="flex w-full gap-2 items-center justify-center">
48+
<IconPlayerStop stroke={stroke} size={16} />
49+
Stop
50+
</div>
51+
</button>
52+
) : (
53+
<Tooltip label="Say 'Continue' to force another answer" withArrow>
54+
<button
55+
className={className}
56+
onClick={handleForceContinue}
57+
disabled={isStreaming}
58+
>
59+
<div className="flex w-full gap-2 items-center justify-center">
60+
<IconMessageBolt stroke={stroke} size={16} />
61+
{!isNarrow && "More"}
62+
</div>
63+
</button>
64+
</Tooltip>
65+
)}
2866
</Portal>
2967
) : null}
3068
</>

‎src/lib/hooks/useCoder2.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ type State = typeof initialState & {
107107
parseMessage: (text: string) => void;
108108
submitResponse: () => Promise<string | Error>;
109109
submitInitialPrompt: () => Promise<string | Error>;
110-
onFinish: () => void;
110+
onFinishReview: () => void;
111111
parseFiles: (text: string) => void;
112112
sendPrompt: (prompt: string) => Promise<string | Error>;
113113
receiveStream: () => Promise<void>;
@@ -354,7 +354,7 @@ export const useCoder = create<State>()((set, get) => {
354354
// there are still unreviewed files. try again.
355355
setTimeout(() => handlers.sendPrompt(computed.promptReview), 10);
356356
} else {
357-
return handlers.onFinish();
357+
return handlers.onFinishReview();
358358
}
359359
}
360360
},
@@ -445,7 +445,7 @@ export const useCoder = create<State>()((set, get) => {
445445
return currentMessage;
446446
},
447447

448-
onFinish: () => {
448+
onFinishReview: () => {
449449
set({ step: 3 });
450450
},
451451
};

‎src/lib/hooks/workers/useContinueClicker.ts

+29-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ import { store } from "./useElements";
55
const CLICKER_DEFAULT = 50;
66

77
export const useContinueClicker = () => {
8-
const [node, container, t] = store((s) => [
8+
const [node, regen, container, t, submitText, isStreaming] = store((s) => [
99
s.button.continue,
10+
s.button.regen,
1011
s.container.continue,
1112
s.changeT,
13+
s.handlers.submitText,
14+
s.computed.isStreaming(),
1215
]);
1316
const [seconds, setSeconds] = useState(50);
17+
const [className, setClassName] = useState("");
1418
const { start, stop, active } = useInterval(
1519
() => setSeconds((s) => Math.max(0, s - 1)),
1620
100
@@ -19,26 +23,45 @@ export const useContinueClicker = () => {
1923
stop();
2024
setSeconds(CLICKER_DEFAULT * 2);
2125
}, [stop]);
26+
const handleForceContinue = useCallback(
27+
() => submitText("Continue"),
28+
[submitText]
29+
);
2230

23-
const secondsText = active
24-
? `Continue in ${(seconds / 10).toFixed(1)}`
25-
: "Continue";
31+
const secondsText = active ? `${(seconds / 10).toFixed(1)}` : "";
2632

2733
useEffect(() => {
2834
if (!node) return;
2935
setSeconds(CLICKER_DEFAULT);
36+
3037
node.innerHTML = "";
3138
const tooSoon = Date.now() - t < 1000;
3239
if (tooSoon) return;
3340
start();
3441
return stop;
3542
}, [node]);
36-
43+
useEffect(() => {
44+
if (!regen) return;
45+
const newClassName = regen.className
46+
.split(" ")
47+
.filter((c) => c !== "-z-0")
48+
.join(" ");
49+
if (className !== newClassName) setClassName(newClassName);
50+
}, [regen, className]);
3751
useEffect(() => {
3852
if (active && node && seconds <= 0) {
3953
node.click();
4054
}
4155
}, [seconds, node, active]);
4256

43-
return [secondsText, handleStop, node, active && container] as const;
57+
return {
58+
secondsText,
59+
handleStop,
60+
handleForceContinue,
61+
node,
62+
container,
63+
active,
64+
isStreaming,
65+
className,
66+
} as const;
4467
};

0 commit comments

Comments
 (0)