Skip to content

Commit

Permalink
refactor(store): Use central element store, add Coder
Browse files Browse the repository at this point in the history
  • Loading branch information
@zenyr
zenyr committed Jun 23, 2023
1 parent d1daa60 commit d4a42d4
Show file tree
Hide file tree
Showing 37 changed files with 2,615 additions and 800 deletions.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "ChatGPT Augment",
"version": "1.7.3",
"version": "1.8.0",
"description": "Enhance chat with ChatGPT-Augment: auto-continue, macros, token count, prompts, gradients, JSON format.",
"content_scripts": [
{
Expand Down
12 changes: 10 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
{
"name": "chatgpt-augment",
"private": true,
"version": "1.7.3",
"version": "1.8.0",
"type": "module",
"license": "WTFPL",
"scripts": {
"build": "node ./scripts/match-versions.mjs && tsc && NODE_ENV=production vite build && NODE_ENV=production node ./scripts/add-banners.mjs",
"build-lex": "node ./scripts/match-versions.mjs && NODE_ENV=production vite build",
"dev": "vite dev",
"watch": "nodemon --watch src --ext ts,tsx -x \"concurrently -n 'Build,TSC' -c 'blue.bold,green.bold' 'yarn build-lex' 'tsc'\"",
"preview": "vite preview"
},
"devDependencies": {
"@crxjs/vite-plugin": "beta",
"@types/chrome": "^0.0.237",
"@types/jszip": "^3.4.1",
"@types/lodash": "^4.14.195",
"@types/marked": "^5.0.0",
"@types/node-emoji": "^1.8.2",
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"@vitejs/plugin-react-swc": "^3.3.2",
"chokidar-cli": "^3.0.0",
"concurrently": "^8.2.0",
"nodemon": "^2.0.22",
"rollup-plugin-visualizer": "^5.9.0",
"typescript": "^5.0.2",
"vite": "^4.3.9"
Expand All @@ -29,14 +34,17 @@
"@mantine/hooks": "^6.0.13",
"@mantine/notifications": "^6.0.13",
"@radix-ui/react-slot": "^1.0.2",
"@tabler/icons-react": "^2.21.0",
"@tabler/icons-react": "^2.22.0",
"chrono-node": "^2.6.3",
"json5": "^2.2.3",
"jszip": "^3.10.1",
"lodash": "^4.17.21",
"marked": "^5.1.0",
"node-emoji": "^2.0.2",
"node-html-markdown": "^1.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-wrap-balancer": "^1.0.0",
"reactflow": "^11.7.2"
},
"packageManager": "[email protected]"
Expand Down
151 changes: 79 additions & 72 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
import { MutationWatcher } from "@/comp/workers/MutationWatcher";
import {
Box,
ColorSchemeProvider,
Group,
MantineProvider,
Portal,
Text,
Tooltip,
Transition,
createEmotionCache,
} from "@mantine/core";
import { useToggle, useViewportSize } from "@mantine/hooks";
import { useViewportSize } from "@mantine/hooks";
import { Notifications } from "@mantine/notifications";
import { useEffect, useState } from "react";
import json from "../package.json";
import { JSONFormatter } from "./comp/modals/JSONFormatter";
import { useEffect, useMemo, useState } from "react";
import Balancer from "react-wrap-balancer";
import { version } from "../package.json";
import { ClickThrougher } from "./comp/workers/ClickThrougher";
import { ContinueWorker } from "./comp/workers/ContinueClicker";
import { ConversationMenu } from "./comp/workers/ConversationMenu";
import { InputWatcher } from "./comp/workers/InputWatcher";
import { SelectionWatcher } from "./comp/workers/SelectionWatcher";
import { TextAreaAugmenter } from "./comp/workers/TextAreaAugmenter";
import { useCgptColorScheme } from "./lib/hooks/useColorScheme";
import { useElements } from "./lib/hooks/useElements";
import { useRootTarget } from "./lib/hooks/useTarget";
import { useRootAnchor } from "./lib/hooks/useTarget";
import { useElsUpdater } from "./lib/hooks/workers/useElements";
import { MessageSerializer } from "./comp/workers/MessageSerializer";
import { CoderModal2 } from "./comp/modals/CoderModal2";

const cache = createEmotionCache({
key: "cgpt-agmt",
Expand All @@ -29,16 +30,31 @@ const cache = createEmotionCache({

export const App = () => {
const [colorScheme, setTheme] = useCgptColorScheme();
const [target, orgHtml] = useRootTarget("form + div");

const [mounted, setMounted] = useState(false);
const [visible, toggle] = useToggle([true, false]);
const isWide = useViewportSize().width > 500;
const { textarea, parent } = useElements();
const isWide = useViewportSize().width > 600;
const [tgt, __html] = useRootAnchor();

const { width, height } = useElsUpdater(); // updates els on mutation
const wrapperStyle = useMemo(
() =>
({
width,
height,
userSelect: "none",
backdropFilter: "blur(3px)",
zIndex: 1,
background:
colorScheme === "dark"
? "rgb(52, 53, 64 , 0.5)"
: "rgb(255, 255, 255, 0.5)",
} as const),
[colorScheme, width, height]
);
useEffect(() => {
if (!target) setMounted(false);
setMounted(false);
setTimeout(() => setMounted(true), 100);
}, [target]);

}, [tgt]);
return (
<ColorSchemeProvider
colorScheme={colorScheme}
Expand All @@ -47,63 +63,54 @@ export const App = () => {
}
>
<MantineProvider emotionCache={cache} theme={{ colorScheme }}>
{target && (
<Portal target={target}>
<Transition
mounted={mounted}
transition="pop"
duration={2000}
timingFunction="ease"
>
{(styles) => (
<Group
style={styles}
spacing="xs"
align="center"
position="center"
className="cgpt-agmt"
noWrap
<Box style={wrapperStyle}>
<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
>
<Text
variant="gradient"
style={{
lineHeight: "initial",
display: visible ? "block" : "none",
}}
onClick={() => toggle()}
id="chatgpt-augment-app"
>
{isWide && `ChatGPT Augment `}v{json.version}
<Text variant="gradient" size="sm">
{isWide && `ChatGPT Augment `}v{version}
</Text>
<Text
style={{
lineHeight: "initial",
display: !visible ? "block" : "none",
}}
onClick={() => toggle()}
dangerouslySetInnerHTML={{ __html: orgHtml }}
/>
<Group
style={{ display: visible ? "flex" : "none" }}
noWrap
spacing="xs"
align="center"
position="center"
>
<MutationWatcher />
{textarea && <InputWatcher textarea={textarea} />}
{textarea && <SelectionWatcher textarea={textarea} />}
<JSONFormatter />
<MessageSerializer />
</Group>
</Group>
)}
</Transition>
</Portal>
)}
{mounted && parent && <ClickThrougher parent={parent} />}
<ConversationMenu />
<Notifications position="top-right" />
</Tooltip>
<ContinueWorker />
<ClickThrougher />
<TextAreaAugmenter />
<ConversationMenu />
<MessageSerializer />
<CoderModal2 />
{/* BUTTONS / UI HERE */}
</Group>
)}
</Transition>
<Notifications position="top-right" />
</Box>
</MantineProvider>
</ColorSchemeProvider>
);
Expand Down
68 changes: 68 additions & 0 deletions src/comp/coder2/Files.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { useCoder } from "@/lib/hooks/useCoder2";
import { ClassNames } from "@emotion/react";
import { Paper, UnstyledButton, rem, useMantineTheme } from "@mantine/core";
import { IconCircleDashed, IconFile, IconFileCheck } from "@tabler/icons-react";

export const Coder2Files = () => {
const [files, currentFile, handleFileSelect] = useCoder((s) => [
s.files,
s.currentFile,
s.handlers.handleFileSelect,
]);
const theme = useMantineTheme();
return (
<ClassNames>
{({ css }) => (
<Paper>
{files.map((file) => (
<UnstyledButton
key={file.path}
data-path={file.path}
onClick={handleFileSelect}
className={css`
display: flex;
align-items: center;
gap: ${theme.spacing.xs};
width: 100%;
text-decoration: none;
color: ${theme.colorScheme === "dark"
? theme.colors.dark[0]
: theme.black};
line-height: 1.2;
font-size: ${theme.fontSizes.sm};
padding: ${theme.spacing.xs};
border-top-right-radius: ${theme.radius.sm};
border-bottom-right-radius: ${theme.radius.sm};
border-left: ${rem(1)} solid
${theme.colorScheme === "dark"
? theme.colors.dark[4]
: theme.colors.gray[3]};
background-color: ${currentFile === file.path
? theme.colorScheme === "dark"
? theme.colors.dark[6]
: theme.colors.gray[0]
: "transparent"};
&:hover {
background-color: ${theme.colorScheme === "dark"
? theme.colors.dark[6]
: theme.colors.gray[0]};
}
`}
>
{!file.content ? (
<IconCircleDashed />
) : file.reviewed ? (
<IconFileCheck />
) : (
<IconFile />
)}{" "}
{file.path}
</UnstyledButton>
))}
</Paper>
)}
</ClassNames>
);
};
Loading

0 comments on commit d4a42d4

Please sign in to comment.