🔧 ReFactor II

pages/_app.tsx

@@ -7,8 +7,8 @@ import { CssBaseline, CssVarsProvider } from '@mui/joy';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import '@/common/styles/GithubMarkdown.css';
-import { Brand } from '../src/brand';
-import { createEmotionCache, theme } from '../src/theme';
+import { Brand } from '@/common/brand';
+import { createEmotionCache, theme } from '@/common/theme';
 
 
 // Client-side cache, shared for the whole session of the user in the browser.

pages/_document.tsx

@@ -4,9 +4,9 @@ import { default as Document, DocumentContext, DocumentProps, Head, Html, Main,
 import createEmotionServer from '@emotion/server/create-instance';
 import { getInitColorSchemeScript } from '@mui/joy/styles';
 
-import { Brand } from '../src/brand';
+import { Brand } from '@/common/brand';
 import { MyAppProps } from './_app';
-import { bodyFontClassName, createEmotionCache } from '../src/theme';
+import { bodyFontClassName, createEmotionCache } from '@/common/theme';
 
 
 interface MyDocumentProps extends DocumentProps {

pages/index.tsx

@@ -6,7 +6,7 @@ import { Chat } from '@/apps/chat/Chat';
 import { NoSSR } from '@/common/components/NoSSR';
 import { SettingsModal } from '@/apps/settings/SettingsModal';
 import { isValidOpenAIApiKey } from '@/modules/openai/openai.client';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 
 export default function Home() {

src/apps/chat/Chat.tsx

@@ -10,10 +10,10 @@ import { callPublish } from '@/modules/pastegg/pastegg.client';
 
 import { ConfirmationModal } from '@/common/components/ConfirmationModal';
 import { Link } from '@/common/components/Link';
-import { conversationToMarkdown } from '@/common/libs/converters/conversationToMarkdown';
-import { createDMessage, DMessage, useChatStore } from '@/common/stores/store-chats';
-import { useComposerStore } from '@/common/stores/store-composer';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { conversationToMarkdown } from '@/common/util/conversationToMarkdown';
+import { createDMessage, DMessage, useChatStore } from '@/common/state/store-chats';
+import { useComposerStore } from '@/common/state/store-composer';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { ApplicationBar } from './components/appbar/ApplicationBar';
 import { ChatMessageList } from './components/ChatMessageList';

src/apps/chat/components/ChatMessageList.tsx

@@ -4,8 +4,8 @@ import { shallow } from 'zustand/shallow';
 import { Box, List } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
-import { createDMessage, DMessage, useChatStore } from '@/common/stores/store-chats';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { createDMessage, DMessage, useChatStore } from '@/common/state/store-chats';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { ChatMessage } from './message/ChatMessage';
 import { ChatMessageSelectable, MessagesSelectionHeader } from './message/ChatMessageSelectable';

src/apps/chat/components/PurposeSelector.tsx

@@ -6,9 +6,9 @@ import ClearIcon from '@mui/icons-material/Clear';
 import SearchIcon from '@mui/icons-material/Search';
 
 import { SystemPurposeId, SystemPurposes } from '../../../data';
-import { useChatStore } from '@/common/stores/store-chats';
-import { usePurposeStore } from '@/common/stores/store-purposes';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { useChatStore } from '@/common/state/store-chats';
+import { usePurposeStore } from '@/common/state/store-purposes';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 
 // Constants for tile sizes / grid width - breakpoints need to be computed here to work around

src/apps/chat/components/appbar/ApplicationBar.tsx

@@ -16,8 +16,8 @@ import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
 
 import { ChatModelId, ChatModels, SystemPurposeId, SystemPurposes } from '../../../../data';
 import { ConfirmationModal } from '@/common/components/ConfirmationModal';
-import { downloadConversationJson, restoreConversationFromJson, useChatStore } from '@/common/stores/store-chats';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { downloadConversationJson, restoreConversationFromJson, useChatStore } from '@/common/state/store-chats';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { AppBarDropdown } from './AppBarDropdown';
 import { AppBarDropdownWithSymbol } from './AppBarDropdownWithSymbol';

src/apps/chat/components/appbar/PagesMenu.tsx

@@ -9,8 +9,8 @@ import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { ConfirmationModal } from '@/common/components/ConfirmationModal';
 import { InlineTextarea } from '@/common/components/InlineTextarea';
 import { SystemPurposes } from '../../../../data';
-import { conversationTitle, MAX_CONVERSATIONS, useChatStore } from '@/common/stores/store-chats';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { conversationTitle, MAX_CONVERSATIONS, useChatStore } from '@/common/state/store-chats';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 
 const DEBUG_CONVERSATION_IDs = false;

src/apps/chat/components/composer/Composer.tsx

@@ -17,18 +17,18 @@ import UploadFileIcon from '@mui/icons-material/UploadFile';
 
 import { ChatModels, SendModeId, SendModes } from '../../../../data';
 import { ConfirmationModal } from '@/common/components/ConfirmationModal';
-import { countModelTokens } from '@/common/libs/llms/token-counter';
-import { hideOnDesktop, hideOnMobile } from '@/apps/settings/SettingsModal';
-import { htmlTableToMarkdown } from '@/common/libs/converters/htmlTableToMarkdown';
-import { pdfToText } from '@/common/libs/converters/pdfToText';
-import { useChatStore } from '@/common/stores/store-chats';
-import { useComposerStore } from '@/common/stores/store-composer';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { countModelTokens } from '@/common/llm-util/token-counter';
+import { htmlTableToMarkdown } from '@/common/util/htmlTableToMarkdown';
+import { pdfToText } from '@/common/util/pdfToText';
+import { useChatStore } from '@/common/state/store-chats';
+import { useComposerStore } from '@/common/state/store-composer';
+import { useSettingsStore } from '@/common/state/store-settings';
 import { useSpeechRecognition } from '@/common/components/useSpeechRecognition';
 
 import { ContentReducerModal } from './ContentReducerModal';
 import { TokenBadge } from './TokenBadge';
 import { TokenProgressbar } from './TokenProgressbar';
+import { hideOnDesktop, hideOnMobile } from '@/common/theme';
 import { isValidProdiaApiKey, requireUserKeyProdia } from '@/modules/prodia/prodia.client';
 
 

src/apps/chat/components/composer/ContentReducerModal.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { Alert, Box, Button, CircularProgress, Divider, FormControl, FormHelperText, FormLabel, Modal, ModalClose, ModalDialog, Option, Select, Slider, Stack, Textarea, Typography } from '@mui/joy';
 
 import { ChatModelId, ChatModels, fastChatModelId } from '../../../../data';
-import { Section } from '@/apps/settings/SettingsModal';
-import { countModelTokens } from '@/common/libs/llms/token-counter';
-import { summerizeToFitContextBudget } from '@/common/libs/llms/summerize';
+import { Section } from '@/common/components/Section';
+import { countModelTokens } from '@/common/llm-util/token-counter';
+import { summerizeToFitContextBudget } from '@/common/llm-util/summerize';
 
 import { TokenBadge } from './TokenBadge';
 

src/apps/chat/components/message/ChatMessage.tsx

@@ -31,14 +31,14 @@ import ShapeLineOutlinedIcon from '@mui/icons-material/ShapeLineOutlined';
 import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
 
-import { DMessage } from '@/common/stores/store-chats';
+import { DMessage } from '@/common/state/store-chats';
 import { InlineTextarea } from '@/common/components/InlineTextarea';
 import { Link } from '@/common/components/Link';
 import { SystemPurposeId, SystemPurposes } from '../../../../data';
-import { cssRainbowColorKeyframes } from '../../../../theme';
-import { prettyBaseModel } from '@/common/libs/converters/conversationToMarkdown';
+import { cssRainbowColorKeyframes } from '@/common/theme';
+import { prettyBaseModel } from '@/common/util/conversationToMarkdown';
 import { requireUserKeyElevenLabs, speakText } from '@/modules/elevenlabs/elevenlabs.client';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { OpenInCodepen } from './OpenInCodepen';
 import { OpenInReplit } from './OpenInReplit';

src/apps/chat/components/message/ChatMessageSelectable.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Checkbox, IconButton, ListItem, Sheet, Typography, useThem
 import ClearIcon from '@mui/icons-material/Clear';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
-import { DMessage } from '@/common/stores/store-chats';
+import { DMessage } from '@/common/state/store-chats';
 
 import { TokenBadge } from '../composer/TokenBadge';
 import { makeAvatar, messageBackground } from './ChatMessage';

src/apps/chat/util/agi-immediate.ts

@@ -1,10 +1,10 @@
 import { ChatModelId, SystemPurposeId, SystemPurposes } from '../../../data';
-import { createDMessage, DMessage, useChatStore } from '@/common/stores/store-chats';
+import { createDMessage, DMessage, useChatStore } from '@/common/state/store-chats';
 
 import { OpenAI } from '@/modules/openai/openai.types';
 import { getOpenAISettings } from '@/modules/openai/openai.client';
 import { speakText } from '@/modules/elevenlabs/elevenlabs.client';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { updateAutoConversationTitle } from './ai-functions';
 

src/apps/chat/util/agi-react.ts

@@ -1,6 +1,6 @@
-import { Agent } from '@/common/libs/llms/react';
+import { Agent } from '@/common/llm-util/react';
 import { ChatModelId, SystemPurposeId } from '../../../data';
-import { DMessage, useChatStore } from '@/common/stores/store-chats';
+import { DMessage, useChatStore } from '@/common/state/store-chats';
 
 import { createAssistantTypingMessage, updatePurposeInHistory } from './agi-immediate';
 

src/apps/chat/util/ai-functions.ts

@@ -1,6 +1,6 @@
 import { ChatModelId, fastChatModelId } from '../../../data';
 import { callChat } from '@/modules/openai/openai.client';
-import { useChatStore } from '@/common/stores/store-chats';
+import { useChatStore } from '@/common/state/store-chats';
 
 
 /**

src/apps/chat/util/imagine.ts

@@ -1,8 +1,8 @@
 import { Prodia } from '@/modules/prodia/prodia.types';
 import { prodiaDefaultModelId } from '@/modules/prodia/prodia.client';
 
-import { createDMessage, DMessage, useChatStore } from '@/common/stores/store-chats';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { createDMessage, DMessage, useChatStore } from '@/common/state/store-chats';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 
 /**

src/apps/settings/SettingsModal.tsx

@@ -3,12 +3,10 @@ import { shallow } from 'zustand/shallow';
 import { useQuery } from '@tanstack/react-query';
 
 import { Box, Button, CircularProgress, FormControl, FormHelperText, FormLabel, IconButton, Input, Modal, ModalClose, ModalDialog, ModalOverflow, Option, Radio, RadioGroup, Select, Slider, Stack, Switch, Tooltip, Typography } from '@mui/joy';
-import { SxProps } from '@mui/joy/styles/types';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import KeyIcon from '@mui/icons-material/Key';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
@@ -22,49 +20,18 @@ import { Prodia } from '@/modules/prodia/prodia.types';
 import { isValidElevenLabsApiKey, requireUserKeyElevenLabs } from '@/modules/elevenlabs/elevenlabs.client';
 import { isValidProdiaApiKey, prodiaDefaultModelId, requireUserKeyProdia } from '@/modules/prodia/prodia.client';
 
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { Section } from '@/common/components/Section';
+import { useSettingsStore } from '@/common/state/store-settings';
 
-import languages from '@/apps/settings/languages.json' assert { type: 'json' };
+import languages from './languages.json' assert { type: 'json' };
+import { hideOnMobile } from '@/common/theme';
 
 
 export const uniformGap: number = 2;
 export const settingsCol1Width: number = 150;
 export const settingsMaxWidth: number = 500;
-export const hideOnMobile = { display: { xs: 'none', md: 'flex' } };
-export const hideOnDesktop = { display: { xs: 'flex', md: 'none' } };
 
 
-export function Section(props: { title?: string; collapsible?: boolean, collapsed?: boolean, disclaimer?: string, sx?: SxProps, children: React.ReactNode }) {
-  const [collapsed, setCollapsed] = React.useState(props.collapsed ?? false);
-
-  return <>
-
-    <Stack direction='row' sx={{ mt: (props.title ? 1 : 0), alignItems: 'center', ...(props.sx ?? {}) }}>
-      {!!props.title && (
-        <FormLabel>
-          {props.title}
-        </FormLabel>
-      )}
-      {!!props.collapsible && (
-        <IconButton size='md' variant='plain' color='neutral' onClick={() => setCollapsed(!collapsed)} sx={{ ml: 1 }}>
-          {!collapsed ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-        </IconButton>
-      )}
-    </Stack>
-
-    {!collapsed && <Box sx={{ mt: 1.5, mb: 1.5 }}>
-      {props.children}
-    </Box>}
-
-    {!!props.disclaimer && !collapsed && (
-      <FormHelperText>
-        {props.disclaimer}
-      </FormHelperText>
-    )}
-
-  </>;
-}
-
 function LanguageSelect() {
   // external state
   const { preferredLanguage, setPreferredLanguage } = useSettingsStore(state => ({ preferredLanguage: state.preferredLanguage, setPreferredLanguage: state.setPreferredLanguage }), shallow);

src/common/components/Section.tsx

@@ -0,0 +1,36 @@
+import { SxProps } from '@mui/joy/styles/types';
+import * as React from 'react';
+import { Box, FormHelperText, FormLabel, IconButton, Stack } from '@mui/joy';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+export function Section(props: { title?: string; collapsible?: boolean, collapsed?: boolean, disclaimer?: string, sx?: SxProps, children: React.ReactNode }) {
+  const [collapsed, setCollapsed] = React.useState(props.collapsed ?? false);
+
+  return <>
+
+    <Stack direction='row' sx={{ mt: (props.title ? 1 : 0), alignItems: 'center', ...(props.sx ?? {}) }}>
+      {!!props.title && (
+        <FormLabel>
+          {props.title}
+        </FormLabel>
+      )}
+      {!!props.collapsible && (
+        <IconButton size='md' variant='plain' color='neutral' onClick={() => setCollapsed(!collapsed)} sx={{ ml: 1 }}>
+          {!collapsed ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+        </IconButton>
+      )}
+    </Stack>
+
+    {!collapsed && <Box sx={{ mt: 1.5, mb: 1.5 }}>
+      {props.children}
+    </Box>}
+
+    {!!props.disclaimer && !collapsed && (
+      <FormHelperText>
+        {props.disclaimer}
+      </FormHelperText>
+    )}
+
+  </>;
+}

src/common/components/useSpeechRecognition.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useSettingsStore } from '../stores/store-settings';
+import { useSettingsStore } from '../state/store-settings';
 
 interface ISpeechRecognition {
   lang: string;

src/common/llm-util/react.ts

@@ -1,7 +1,7 @@
 import { OpenAI } from '@/modules/openai/openai.types';
 import { callChat } from '@/modules/openai/openai.client';
 
-import { ChatModelId } from '../../../data';
+import { ChatModelId } from '../../data';
 import { reActPrompt } from './prompts';
 
 const actionRe = /^Action: (\w+): (.*)$/;

src/common/llm-util/summerize.ts

@@ -1,6 +1,6 @@
 import { callChat } from '@/modules/openai/openai.client';
 
-import { ChatModelId, ChatModels } from '../../../data';
+import { ChatModelId, ChatModels } from '../../data';
 import { cleanupPrompt } from './prompts';
 
 
@@ -43,7 +43,7 @@ export async function summerizeToFitContextBudget(text: string, targetWordCount:
   console.log('************Finished cleaning up the chunks************');
 
   // return if the targetWordCount already reached after step 2
-  if (cleanedChunks.reduce((acc, chunk) => acc + (typeof chunk === 'string' ? chunk.split(' ').length : 0), 0) <= targetWordCount) {
+  if (cleanedChunks.reduce((acc, chunk) => acc + chunk.split(' ').length, 0) <= targetWordCount) {
     console.log('enough content is removed, return the cleaned chunks');
     return cleanedChunks.join('\n');
   }

src/common/llm-util/token-counter.ts

@@ -1,7 +1,7 @@
 import { encoding_for_model, get_encoding, Tiktoken } from '@dqbd/tiktoken';
 
-import { ChatModelId, defaultChatModelId } from '../../../data';
-import { DMessage } from '../../stores/store-chats';
+import { ChatModelId, defaultChatModelId } from '../../data';
+import { DMessage } from '../state/store-chats';
 
 
 // Do not set this to true in production, it's very verbose

src/common/state/store-chats.ts

@@ -3,7 +3,7 @@ import { devtools, persist } from 'zustand/middleware';
 import { v4 as uuidv4 } from 'uuid';
 
 import { ChatModelId, defaultChatModelId, defaultSystemPurposeId, SystemPurposeId } from '../../data';
-import { updateTokenCount } from '../libs/llms/token-counter';
+import { updateTokenCount } from '../llm-util/token-counter';
 
 
 /// Conversations Store

src/common/theme.ts

@@ -4,10 +4,11 @@ import { Inter, JetBrains_Mono } from 'next/font/google';
 import { extendTheme } from '@mui/joy';
 
 
-// Theme & Fonts
+// CSS utils
+export const hideOnMobile = { display: { xs: 'none', md: 'flex' } };
+export const hideOnDesktop = { display: { xs: 'flex', md: 'none' } };
 
-// For next April Fools' week
-// export const foolsMode = new Date().getMonth() === 3 && new Date().getDate() <= 7;
+// Theme & Fonts
 
 const inter = Inter({
   weight: ['400', '500', '600', '700'],
@@ -134,4 +135,9 @@ export function createEmotionCache() {
   }
 
   return createCache({ key: 'mui-style', insertionPoint });
-}
+}
+
+// MISC
+
+// For next April Fools' week
+// export const foolsMode = new Date().getMonth() === 3 && new Date().getDate() <= 7;

src/common/util/conversationToMarkdown.ts

@@ -1,5 +1,5 @@
-import { DConversation } from '@/common/stores/store-chats';
-import { SystemPurposes } from '../../../data';
+import { DConversation } from '../state/store-chats';
+import { SystemPurposes } from '../../data';
 
 
 export function prettyBaseModel(model: string | undefined): string {

src/modules/elevenlabs/elevenlabs.client.ts

@@ -1,5 +1,5 @@
 import { ElevenLabs } from './elevenlabs.types';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 
 export const requireUserKeyElevenLabs = !process.env.HAS_SERVER_KEY_ELEVENLABS;

src/modules/openai/OpenAIAdvancedSettings.tsx

@@ -3,10 +3,12 @@ import { shallow } from 'zustand/shallow';
 
 import { Box, FormControl, FormHelperText, FormLabel, Input, Slider, Stack } from '@mui/joy';
 
-import { Brand } from '../../brand';
+import { Brand } from '@/common/brand';
 import { Link } from '@/common/components/Link';
-import { Section, settingsCol1Width, settingsMaxWidth, uniformGap } from '@/apps/settings/SettingsModal';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { Section } from '@/common/components/Section';
+import { useSettingsStore } from '@/common/state/store-settings';
+
+import { settingsCol1Width, settingsMaxWidth, uniformGap } from '@/apps/settings/SettingsModal';
 
 
 export function OpenAIAdvancedSettings() {

src/modules/openai/OpenAISettings.tsx

@@ -7,8 +7,8 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 import { Link } from '@/common/components/Link';
-import { Section } from '@/apps/settings/SettingsModal';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { Section } from '@/common/components/Section';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { isValidOpenAIApiKey, requireUserKeyOpenAI } from './openai.client';
 

src/modules/openai/openai.client.ts

@@ -1,5 +1,5 @@
 import { ChatModelId } from '../../data';
-import { useSettingsStore } from '@/common/stores/store-settings';
+import { useSettingsStore } from '@/common/state/store-settings';
 
 import { OpenAI } from './openai.types';
 

src/modules/pastegg/pastegg.client.ts

@@ -1,6 +1,7 @@
 // noinspection ExceptionCaughtLocallyJS
 
-import { Brand } from '../../brand';
+import { Brand } from '@/common/brand';
+
 import { PasteGG } from './pastegg.types';