Merge branch 'main' of https://github.com/enricoros/big-agi

README.md

@@ -164,7 +164,7 @@ For more detailed information on deploying with Docker, please refer to the [doc
 
 ```bash
 docker build -t big-agi .
-docker run --detach 'big-agi'
+docker run -d -p 3000:3000 big-agi
 ``` 
 
 ### Pre-built image

docs/deploy-docker.md

@@ -6,8 +6,20 @@ Docker ensures faster development cycles, easier collaboration, and seamless env
 ## 🔧 Local Build & Deployment
 
 1. **Clone big-AGI**
-2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile. The command is typically `docker build -t big-agi .`
-3. **Run the Docker Container**: Start a Docker container using the built image with the command `docker run -d -p 3000:3000 big-agi`
+   ```bash
+   git clone https://github.com/enricoros/big-agi.git
+   cd big-agi
+   ``` 
+2. **Build the Docker Image**: Build a local docker image from the provided Dockerfile:
+   ```bash
+   docker build -t big-agi .
+   ```
+3. **Run the Docker Container**: start a Docker container from the newly built image,
+   and expose its http port 3000 to your `localhost:3000` using:
+   ```bash
+   docker run -d -p 3000:3000 big-agi
+   ```
+4. Browse to [http://localhost:3000](http://localhost:3000)
 
 > Note: If the Docker container is built without setting environment variables,
 > the frontend UI will be unaware of them, despite the backend being able to use them at runtime.

docs/environment-variables.md

@@ -3,7 +3,7 @@
 This document provides an explanation of the environment variables used in the big-AGI application.
 
 **All variables are optional**; and _UI options_ take precedence over _backend environment variables_,
-which take place over _defaults_. This file is kept in sync with [`../src/common/types/env.d.ts`](../src/common/types/env.d.ts).
+which take place over _defaults_. This file is kept in sync with [`../src/server/env.mjs`](../src/server/env.mjs).
 
 ### Setting Environment Variables
 
@@ -38,11 +38,11 @@ HELICONE_API_KEY=
 ELEVENLABS_API_KEY=
 ELEVENLABS_API_HOST=
 ELEVENLABS_VOICE_ID=
+# Text-To-Image
+PRODIA_API_KEY=
 # Google Custom Search
 GOOGLE_CLOUD_API_KEY=
 GOOGLE_CSE_ID=
-# Text-To-Image
-PRODIA_API_KEY=
 ```
 
 ## Variables Documentation

next.config.mjs

@@ -0,0 +1,36 @@
+/** @type {import('next').NextConfig} */
+let nextConfig = {
+  reactStrictMode: true,
+
+  // Note: disabled to chech whether the project becomes slower with this
+  // modularizeImports: {
+  //   '@mui/icons-material': {
+  //     transform: '@mui/icons-material/{{member}}',
+  //   },
+  // },
+
+  webpack: (config, _options) => {
+    // @mui/joy: anything material gets redirected to Joy
+    config.resolve.alias['@mui/material'] = '@mui/joy';
+
+    // @dqbd/tiktoken: enable asynchronous WebAssembly
+    config.experiments = {
+      asyncWebAssembly: true,
+      layers: true,
+    };
+
+    return config;
+  },
+};
+
+// Validate environment variables, if set at build time. Will be actually read and used at runtime.
+// This is the reason both this file and the servr/env.mjs files have this extension.
+await import('./src/server/env.mjs');
+
+// conditionally enable the nextjs bundle analyzer
+if (process.env.ANALYZE_BUNDLE) {
+  const { default: withBundleAnalyzer } = await import('@next/bundle-analyzer');
+  nextConfig = withBundleAnalyzer({ openAnalyzer: true })(nextConfig);
+}
+
+export default nextConfig;

package.json

@@ -23,6 +23,7 @@
     "@next/bundle-analyzer": "^14.0.2",
     "@prisma/client": "^5.5.2",
     "@sanity/diff-match-patch": "^3.1.1",
+    "@t3-oss/env-nextjs": "^0.7.1",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.43.3",
     "@trpc/next": "^10.43.3",

pages/_app.tsx

@@ -1,56 +1,39 @@
 import * as React from 'react';
 import Head from 'next/head';
+import { MyAppProps } from 'next/app';
 import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
-import { AppProps } from 'next/app';
-import { CacheProvider, EmotionCache } from '@emotion/react';
-import { CssBaseline, CssVarsProvider } from '@mui/joy';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { Brand } from '~/common/app.config';
 import { apiQuery } from '~/common/util/trpc.client';
-import { appTheme, createEmotionCache } from '~/common/app.theme';
 
 import 'katex/dist/katex.min.css';
 import '~/common/styles/CodePrism.css';
 import '~/common/styles/GithubMarkdown.css';
 
+import { ProviderBackend } from '~/common/state/ProviderBackend';
+import { ProviderTRPCQueryClient } from '~/common/state/ProviderTRPCQueryClient';
+import { ProviderTheming } from '~/common/state/ProviderTheming';
 
-// Client-side cache, shared for the whole session of the user in the browser.
-const clientSideEmotionCache = createEmotionCache();
-
-export interface MyAppProps extends AppProps {
-  emotionCache?: EmotionCache;
-}
-
-function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }: MyAppProps) {
-  const [queryClient] = React.useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-      mutations: {
-        retry: false,
-      },
-    },
-  }));
-  return <>
-    <CacheProvider value={emotionCache}>
-      <Head>
-        <title>{Brand.Title.Common}</title>
-        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
-      </Head>
-      {/* Rect-query provider */}
-      <QueryClientProvider client={queryClient}>
-        <CssVarsProvider defaultMode='light' theme={appTheme}>
-          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-          <CssBaseline />
+
+const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
+  <>
+
+    <Head>
+      <title>{Brand.Title.Common}</title>
+      <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
+    </Head>
+
+    <ProviderTheming emotionCache={emotionCache}>
+      <ProviderTRPCQueryClient>
+        <ProviderBackend>
           <Component {...pageProps} />
-        </CssVarsProvider>
-      </QueryClientProvider>
-    </CacheProvider>
+        </ProviderBackend>
+      </ProviderTRPCQueryClient>
+    </ProviderTheming>
+
     <VercelAnalytics debug={false} />
+
   </>;
-}
 
-// enables the react-query api invocation
+// enables the React Query API invocation
 export default apiQuery.withTRPC(MyApp);

pages/_document.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { AppType } from 'next/app';
+import { AppType, MyAppProps } from 'next/app';
 import { default as Document, DocumentContext, DocumentProps, Head, Html, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
 import { getInitColorSchemeScript } from '@mui/joy/styles';
 
 import { Brand } from '~/common/app.config';
 import { bodyFontClassName, createEmotionCache } from '~/common/app.theme';
 
-import { MyAppProps } from './_app';
-
 
 interface MyDocumentProps extends DocumentProps {
   emotionStyleTags: React.JSX.Element[];

src/apps/chat/components/ChatMessageList.tsx

@@ -5,12 +5,12 @@ import { Box, List } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
 import { DiagramConfig } from '~/modules/aifn/digrams/DiagramsModal';
-import { canUseElevenLabs, speakText } from '~/modules/elevenlabs/elevenlabs.client';
-import { canUseProdia } from '~/modules/prodia/prodia.client';
+import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
 import { useChatLLM } from '~/modules/llms/store-llms';
 
 import { createDMessage, DMessage, useChatStore } from '~/common/state/store-chats';
 import { openLayoutPreferences } from '~/common/layout/store-applayout';
+import { useCapabilityElevenLabs, useCapabilityProdia } from '~/common/components/useCapabilities';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 import { ChatMessage } from './message/ChatMessage';
@@ -47,8 +47,8 @@ export function ChatMessageList(props: {
     };
   }, shallow);
   const { chatLLM } = useChatLLM();
-  const isImaginable = canUseProdia();
-  const isSpeakable = canUseElevenLabs();
+  const { mayWork: isImaginable } = useCapabilityProdia();
+  const { mayWork: isSpeakable } = useCapabilityElevenLabs();
 
 
   // text actions

src/apps/chat/components/applayout/ChatDrawerItems.tsx

@@ -93,7 +93,7 @@ export function ChatDrawerItems(props: {
       <ListItemDecorator><AddIcon /></ListItemDecorator>
       <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
         New
-        {/*<KeyStroke light combo='Ctrl + Alt + N' />*/}
+        {/*<KeyStroke combo='Ctrl + Alt + N' />*/}
       </Box>
     </MenuItem>
 

src/apps/chat/components/applayout/ChatMenuItems.tsx

@@ -119,7 +119,7 @@ export function ChatMenuItems(props: {
       <ListItemDecorator><ClearIcon /></ListItemDecorator>
       <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
         Reset
-        {!disabled && <KeyStroke light combo='Ctrl + Alt + X' />}
+        {!disabled && <KeyStroke combo='Ctrl + Alt + X' />}
       </Box>
     </MenuItem>
 

src/apps/chat/components/applayout/useLLMDropdown.tsx

@@ -56,7 +56,7 @@ function AppBarLLMDropdown(props: {
           <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
           <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
             Models
-            <KeyStroke light combo='Ctrl + Shift + M' />
+            <KeyStroke combo='Ctrl + Shift + M' />
           </Box>
         </ListItemButton>
 

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

@@ -5,7 +5,7 @@ import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 
 import { CameraCaptureModal } from './CameraCaptureModal';
 
-const CAMERA_ENABLE_ON_DESKTOP = false; // process.env.NODE_ENV === 'development';
+const CAMERA_ENABLE_ON_DESKTOP = false;
 
 
 export function ButtonCameraCapture(props: { isMobile: boolean, onOCR: (ocrText: string) => void }) {

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

@@ -10,7 +10,7 @@ const pasteClipboardLegend =
   <Box sx={{ p: 1, lineHeight: 2 }}>
     <b>Paste as 📚 Markdown attachment</b><br />
     Also converts Code and Tables<br />
-    <KeyStroke light combo='Ctrl + Shift + V' />
+    <KeyStroke combo='Ctrl + Shift + V' />
   </Box>;
 
 export function ButtonClipboardPaste(props: { isMobile: boolean, isDeveloperMode: boolean, onPaste: () => void }) {