fix(tweak): Tweak designs

zenyr · Jun 25, 2023 · 74a0fe6 · 74a0fe6
1 parent 4a55d94
commit 74a0fe6
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 100 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,6 @@ import {
   Transition,
   createEmotionCache,
 } from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
 import { Notifications } from "@mantine/notifications";
 import { useEffect, useMemo, useState } from "react";
 import Balancer from "react-wrap-balancer";
@@ -31,87 +30,85 @@ export const App = () => {
   const [colorScheme, setTheme] = useCgptColorScheme();
 
   const [mounted, setMounted] = useState(false);
-  const isWide = useViewportSize().width > 600;
   const [tgt, __html] = useRootAnchor();
 
-  const { width } = useElsUpdater(); // updates els on mutation
+  const { width, height } = useElsUpdater(); // updates els on mutation
+  const isWide = width > 600;
   const wrapperStyle = useMemo(
     () =>
       ({
-        width,
         userSelect: "none",
-        backdropFilter: "blur(3px)",
-        position: "relative",
-
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
         zIndex: 1,
-        background:
-          colorScheme === "dark"
-            ? "rgb(52, 53, 64 , 0.5)"
-            : "rgb(255, 255, 255, 0.5)",
       } as const),
-    [colorScheme, width]
+    []
   );
   useEffect(() => {
     setMounted(false);
     setTimeout(() => setMounted(true), 100);
   }, [tgt]);
   return (
-    <ColorSchemeProvider
-      colorScheme={colorScheme}
-      toggleColorScheme={(theme) =>
-        setTheme(theme || ("system" as unknown as "light"))
-      }
-    >
-      <MantineProvider emotionCache={cache} theme={{ colorScheme }}>
-        <Group style={wrapperStyle} align="center" position="center">
-          <Transition
-            mounted={!!width && mounted}
-            transition="pop"
-            duration={500}
-            exitDuration={100}
-            timingFunction="ease"
-            keepMounted
-          >
-            {(styles) => (
-              <Group
-                style={styles}
-                spacing="xs"
-                align="center"
-                position="center"
-                className="cgpt-agmt"
-                noWrap
-              >
-                <Tooltip
-                  label={
-                    <Text
-                      component={Balancer}
-                      size="xs"
-                      dangerouslySetInnerHTML={{ __html }}
-                    />
-                  }
-                  styles={{
-                    tooltip: { maxWidth: "90vw", whiteSpace: "pre-wrap" },
-                  }}
-                  withArrow
-                  withinPortal
+    <div style={{ width, height, position: "relative" }}>
+      <ColorSchemeProvider
+        colorScheme={colorScheme}
+        toggleColorScheme={(theme) =>
+          setTheme(theme || ("system" as unknown as "light"))
+        }
+      >
+        <MantineProvider emotionCache={cache} theme={{ colorScheme }}>
+          <Group style={wrapperStyle} align="center" position="center">
+            <Transition
+              mounted={!!width && mounted}
+              transition="pop"
+              duration={500}
+              exitDuration={100}
+              timingFunction="ease"
+              keepMounted
+            >
+              {(styles) => (
+                <Group
+                  style={styles}
+                  spacing="xs"
+                  align="center"
+                  position="center"
+                  className="cgpt-agmt"
+                  noWrap
                 >
-                  <Text variant="gradient" size="sm">
-                    {isWide && `ChatGPT Augment `}v{version}
-                  </Text>
-                </Tooltip>
-                <ContinueWorker />
-                <ClickThrougher />
-                <TextAreaAugmenter />
-                <ConversationMenu />
-                <MessageSerializer />
-                <CoderModal2 />
-                {/* BUTTONS / UI HERE */}
-              </Group>
-            )}
-          </Transition>
-          <Notifications position="top-right" />
-        </Group>
-      </MantineProvider>
-    </ColorSchemeProvider>
+                  <Tooltip
+                    label={
+                      <Text
+                        component={Balancer}
+                        size="xs"
+                        dangerouslySetInnerHTML={{ __html }}
+                      />
+                    }
+                    styles={{
+                      tooltip: { maxWidth: "90vw", whiteSpace: "pre-wrap" },
+                    }}
+                    withArrow
+                    withinPortal
+                  >
+                    <Text variant="gradient" size="sm">
+                      {isWide && `ChatGPT Augment `}v{version}
+                    </Text>
+                  </Tooltip>
+                  <ContinueWorker />
+                  <ClickThrougher />
+                  <TextAreaAugmenter />
+                  <ConversationMenu />
+                  <MessageSerializer />
+                  <CoderModal2 />
+                  {/* BUTTONS / UI HERE */}
+                </Group>
+              )}
+            </Transition>
+            <Notifications position="top-right" />
+          </Group>
+        </MantineProvider>
+      </ColorSchemeProvider>
+    </div>
   );
 };
diff --git a/src/comp/coder2/Prepare.tsx b/src/comp/coder2/Prepare.tsx
@@ -14,8 +14,8 @@ import { CoderLanguageSelector } from "./Languages";
 
 export const Coder2Prepare = () => {
   const [isChatNew, isChatGpt4] = store((s) => [
-    !s.container.conversations?.length,
-    s.button.gptActive === s.button.gpt4,
+    !s.container.conversations?.length && !!s.button.gptActive,
+    !!(s.button.gptActive && s.button.gptActive === s.button.gpt4),
   ]);
   const [handlers, prepareValues, prepared, questionCount, appName, language] =
     useCoder((s) => [

diff --git a/src/comp/workers/ContinueClicker.tsx b/src/comp/workers/ContinueClicker.tsx
@@ -1,30 +1,68 @@
 import { useContinueClicker } from "@/lib/hooks/workers/useContinueClicker";
-import { Portal } from "@mantine/core";
-import { IconPlayerStop, IconPlayerTrackNext } from "@tabler/icons-react";
+import { Portal, Tooltip } from "@mantine/core";
+import { useViewportSize } from "@mantine/hooks";
+import {
+  IconMessageBolt,
+  IconPlayerStop,
+  IconPlayerTrackNext,
+} from "@tabler/icons-react";
 
 export const ContinueWorker = () => {
-  const [seconds, stop, node, container] = useContinueClicker();
+  const {
+    secondsText,
+    handleStop,
+    handleForceContinue,
+    node,
+    container,
+    active,
+    isStreaming,
+    className,
+  } = useContinueClicker();
+  const isNarrow = useViewportSize().width <= 768;
+  const stroke = isNarrow ? 2 : 1;
   return (
     <>
       {node ? (
         <Portal target={node}>
           <div className="flex w-full gap-2 items-center justify-center">
-            <IconPlayerTrackNext stroke={1} size={16} />
-            {seconds}
+            <IconPlayerTrackNext stroke={stroke} size={16} />
+            <span style={{ display: !isNarrow ? "inline" : "none" }}>
+              Continue{active && " in "}
+            </span>
+            <span
+              style={{
+                display: active || !isNarrow ? "inline" : "none",
+                fontFamily: "monospace",
+              }}
+            >
+              {secondsText}
+            </span>
           </div>
         </Portal>
       ) : null}
       {container ? (
-        <Portal target={container}>
-          <button
-            className="btn relative btn-neutral -z-0 border-0 md:border"
-            onClick={stop}
-          >
-            <div className="flex w-full gap-2 items-center justify-center">
-              <IconPlayerStop stroke={1} size={16} />
-              Stop
-            </div>
-          </button>
+        <Portal target={container} style={{ height: "100%", display: "flex" }}>
+          {active ? (
+            <button className={className} onClick={handleStop}>
+              <div className="flex w-full gap-2 items-center justify-center">
+                <IconPlayerStop stroke={stroke} size={16} />
+                Stop
+              </div>
+            </button>
+          ) : (
+            <Tooltip label="Say 'Continue' to force another answer" withArrow>
+              <button
+                className={className}
+                onClick={handleForceContinue}
+                disabled={isStreaming}
+              >
+                <div className="flex w-full gap-2 items-center justify-center">
+                  <IconMessageBolt stroke={stroke} size={16} />
+                  {!isNarrow && "More"}
+                </div>
+              </button>
+            </Tooltip>
+          )}
         </Portal>
       ) : null}
     </>

diff --git a/src/lib/hooks/useCoder2.ts b/src/lib/hooks/useCoder2.ts
@@ -107,7 +107,7 @@ type State = typeof initialState & {
     parseMessage: (text: string) => void;
     submitResponse: () => Promise<string | Error>;
     submitInitialPrompt: () => Promise<string | Error>;
-    onFinish: () => void;
+    onFinishReview: () => void;
     parseFiles: (text: string) => void;
     sendPrompt: (prompt: string) => Promise<string | Error>;
     receiveStream: () => Promise<void>;
@@ -354,7 +354,7 @@ export const useCoder = create<State>()((set, get) => {
           // there are still unreviewed files. try again.
           setTimeout(() => handlers.sendPrompt(computed.promptReview), 10);
         } else {
-          return handlers.onFinish();
+          return handlers.onFinishReview();
         }
       }
     },
@@ -445,7 +445,7 @@ export const useCoder = create<State>()((set, get) => {
       return currentMessage;
     },
 
-    onFinish: () => {
+    onFinishReview: () => {
       set({ step: 3 });
     },
   };

diff --git a/src/lib/hooks/workers/useContinueClicker.ts b/src/lib/hooks/workers/useContinueClicker.ts
@@ -5,12 +5,16 @@ import { store } from "./useElements";
 const CLICKER_DEFAULT = 50;
 
 export const useContinueClicker = () => {
-  const [node, container, t] = store((s) => [
+  const [node, regen, container, t, submitText, isStreaming] = store((s) => [
     s.button.continue,
+    s.button.regen,
     s.container.continue,
     s.changeT,
+    s.handlers.submitText,
+    s.computed.isStreaming(),
   ]);
   const [seconds, setSeconds] = useState(50);
+  const [className, setClassName] = useState("");
   const { start, stop, active } = useInterval(
     () => setSeconds((s) => Math.max(0, s - 1)),
     100
@@ -19,26 +23,45 @@ export const useContinueClicker = () => {
     stop();
     setSeconds(CLICKER_DEFAULT * 2);
   }, [stop]);
+  const handleForceContinue = useCallback(
+    () => submitText("Continue"),
+    [submitText]
+  );
 
-  const secondsText = active
-    ? `Continue in ${(seconds / 10).toFixed(1)}`
-    : "Continue";
+  const secondsText = active ? `${(seconds / 10).toFixed(1)}` : "";
 
   useEffect(() => {
     if (!node) return;
     setSeconds(CLICKER_DEFAULT);
+
     node.innerHTML = "";
     const tooSoon = Date.now() - t < 1000;
     if (tooSoon) return;
     start();
     return stop;
   }, [node]);
-
+  useEffect(() => {
+    if (!regen) return;
+    const newClassName = regen.className
+      .split(" ")
+      .filter((c) => c !== "-z-0")
+      .join(" ");
+    if (className !== newClassName) setClassName(newClassName);
+  }, [regen, className]);
   useEffect(() => {
     if (active && node && seconds <= 0) {
       node.click();
     }
   }, [seconds, node, active]);
 
-  return [secondsText, handleStop, node, active && container] as const;
+  return {
+    secondsText,
+    handleStop,
+    handleForceContinue,
+    node,
+    container,
+    active,
+    isStreaming,
+    className,
+  } as const;
 };