feat: Add @chainlit/components (Chainlit#346)

* move ui build out of test command * rebase copy ui dir * fix build command on windows * fix build command on windows * fix path * fix build ui command * prioritize local frontend * force auth0 version (mypy issue) * feat: Add new library @chainlit/components * refactor: Move theme and palette into @chainlit/components * refactor: Update all theme imports * refactor: Move <AudioElement/> to @chainlit/components * refactor: Import element types from @chainlit/components * refactor: Move <InlineAudioList/> to @chainlit/components * refactor: Move <GreyButton/> to @chainlit/components * refactor: Move <FileElement/> to @chainlit/components * refactor: Move <InlintFileList/> to @chainlit/components * refactor: Move <Frame/> to @chainlit/components * refactor: Move <ImageElement/> to @chainlit/components * refactor: Move <ListWithSize/> to @chainlit/components * refactor: Move <InlinedImageList/> to @chainlit/components * refactor: Move <VideoElement/> to @chainlit/components * refactor: Move <InlinedVideoList/> to @chainlit/components * refactor: Move <AvatarElement/> to @chainlit/components * refactor: Move <PDFElement/> to @chainlit/components * refactor: Move <InlinedPDFList/> to @chainlit/components * fix: Errors since we had react-hooks rules * fix: Conflict between shared dependencies * refactor: Move <NotificationCount/> to @chainlit/components * refactor: Move IInput type to @chainlit/components * feat: Add <Link/> * refactor: Move <InputLabel/> to @chainlit/components * refactor: Move <InputStateHandler/> to @chainlit/components * refactor: Move <TextInput/> to @chainlit/components * chore: Remove useless vite.env.d.ts * feat: Add Auth pages to @chainlit/components * chore: Remove useless auto-generated stuff * build: Update UI build scripts * fix: tsconfig.node.json need an include (wtf) * fix: CI not building on windows --------- Co-authored-by: Willy Douhard <[email protected]>
haskinsjg · Sep 5, 2023 · 04973f4 · 04973f4
1 parent 590c1d5
commit 04973f4
Show file tree

Hide file tree

Showing 96 changed files with 2,923 additions and 420 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,12 @@
 {
  "root": true,
  "parser": "@typescript-eslint/parser",
- "plugins": ["@typescript-eslint"],
+ "plugins": ["@typescript-eslint", "react-refresh"],
  "extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended",
- "plugin:@typescript-eslint/recommended"
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react-hooks/recommended",
  ],
  "rules": {
  "@typescript-eslint/no-non-null-assertion": "off",
@@ -19,6 +20,10 @@
  "caughtErrorsIgnorePattern": "^_",
  "ignoreRestSiblings": true
  }
- ]
+ ],
+ "react-refresh/only-export-components": [
+ "warn",
+ { "allowConstantExport": true },
+ ],
  }
 }
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -122,9 +122,13 @@ Run `pnpm test`
 
 Once you create a pull request, the tests will automatically run. It is a good practice to run the tests locally before pushing.
 
+You will need to rebuild the UI if you updated it between test runs.
+
+```sh
+pnpm run buildUi
+```
+
 ### Run one test
 
 1. Find the folder containing the e2e test that you're looking for in `cypress/e2e`.
 2. Run `SINGLE_TEST=FOLDER pnpm test` and change FOLDER with the folder from the previous step (example: `SINGLE_TEST=scoped_elements pnpm run test`).
-
-You can optionally skip the build phase when running a test by adding `SKIP_BUILD=true`.
diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
@@ -16,20 +16,23 @@ jobs:
  - name: Use Node.js 16.15.0
  uses: actions/setup-node@v3
  with:
- node-version: "16.15.0"
- cache: "pnpm"
+ node-version: '16.15.0'
+ cache: 'pnpm'
  - name: Set up Python
  uses: actions/setup-python@v4
  with:
- python-version: "3.8"
- cache: "pip"
- - name: Install test JS dependencies
+ python-version: '3.8'
+ cache: 'pip'
+ - name: Install Poetry
+ run: pip install poetry
+ - name: Install JS dependencies
  run: pnpm install --no-frozen-lockfile
+ - name: Build UI
+ run: pnpm run buildUi
  - name: Lint UI
  run: pnpm run lintUi
-
- - name: Install Poetry
- run: pip install poetry
+ - name: Install Python dependencies
+ run: poetry install -C ./backend --with tests
  - name: Run tests
  env:
  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

diff --git a/.prettierrc b/.prettierrc
@@ -7,6 +7,7 @@
  "importOrder": [
  "pages/(.*)$",
  "@mui/(.*)$",
+ "@chainlit/(.*)$",
  "components/(.*)$",
  "assets/(.*)$",
  "hooks/(.*)$",

diff --git a/backend/chainlit/server.py b/backend/chainlit/server.py
@@ -124,10 +124,10 @@ async def watch_files_for_changes():
 def get_build_dir():
  local_build_dir = os.path.join(PACKAGE_ROOT, "frontend", "dist")
  packaged_build_dir = os.path.join(BACKEND_ROOT, "frontend", "dist")
- if os.path.exists(packaged_build_dir):
- return packaged_build_dir
- elif os.path.exists(local_build_dir):
+ if os.path.exists(local_build_dir):
  return local_build_dir
+ elif os.path.exists(packaged_build_dir):
+ return packaged_build_dir
  else:
  raise FileNotFoundError("Built UI dir not found")
 

diff --git a/backend/pyproject.toml b/backend/pyproject.toml
@@ -34,7 +34,7 @@ tomli = "^2.0.1"
 pydantic = "^1.10.8"
 python-graphql-client = "^0.4.3"
 python-dotenv = "^1.0.0"
-auth0-python = "^4.4.0"
+auth0-python = "4.4.1"
 uptrace = "^1.18.0"
 watchfiles="^0.20.0"
 prisma="^0.10.0"

diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -1,16 +1,11 @@
 import * as dotenv from 'dotenv';
 
-import { installChainlit, runTests } from './utils';
+import { runTests } from './utils';
 
 dotenv.config();
 
 async function main() {
  const matchName = process.env.SINGLE_TEST || '*';
- const skipBuild = process.env.SKIP_BUILD;
-
- if (!skipBuild) {
- await installChainlit();
- }
 
  await runTests(matchName);
 }

diff --git a/cypress/support/utils.ts b/cypress/support/utils.ts
@@ -1,21 +1,21 @@
-import { execSync } from "child_process";
-import { join } from "path";
+import { execSync } from 'child_process';
+import { join } from 'path';
 
 const ROOT = process.cwd();
-export const E2E_DIR = join(ROOT, "cypress/e2e");
-export const BACKEND_DIR = join(ROOT, "backend");
-const FRONTEND_DIR = join(ROOT, "frontend");
+export const E2E_DIR = join(ROOT, 'cypress/e2e');
+export const BACKEND_DIR = join(ROOT, 'backend');
+const FRONTEND_DIR = join(ROOT, 'frontend');
 export const CHAINLIT_PORT = 8000;
 
 export enum ExecutionMode {
- Async = "async",
- Sync = "sync",
+ Async = 'async',
+ Sync = 'sync'
 }
 
 export async function runTests(matchName) {
  // Cypress requires a healthcheck on the server at startup so let's run
  // Chainlit before running tests to pass the healthcheck
- runCommand("pnpm exec ts-node ./cypress/support/run.ts action");
+ runCommand('pnpm exec ts-node ./cypress/support/run.ts action');
 
  // Recording the cypress run is time consuming. Disabled by default.
  // const recordOptions = ` --record --key ${process.env.CYPRESS_RECORD_KEY} `;
@@ -26,14 +26,9 @@ export async function runTests(matchName) {
 
 export function runCommand(command: string, cwd = ROOT) {
  return execSync(command, {
- encoding: "utf-8",
+ encoding: 'utf-8',
  cwd,
  env: process.env,
- stdio: "inherit",
+ stdio: 'inherit'
  });
 }
-
-export function installChainlit() {
- runCommand("pnpm run build", FRONTEND_DIR);
- runCommand(`poetry install -C ${BACKEND_DIR} --with tests`);
-}
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
  },
  "dependencies": {
  "@auth0/auth0-react": "^2.2.1",
+ "@chainlit/components": "workspace:^",
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.14.7",
@@ -53,8 +54,6 @@
  "@types/draft-js": "^0.11.10",
  "@types/lodash": "^4.14.197",
  "@types/node": "^20.5.7",
- "@types/react": "^18.2.21",
- "@types/react-dom": "^18.2.7",
  "@types/react-resizable": "^3.0.4",
  "@types/react-syntax-highlighter": "^15.5.7",
  "@types/react-window-infinite-loader": "^1.0.6",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -3,11 +3,12 @@ import { Toaster } from 'react-hot-toast';
 import { RouterProvider } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { router } from 'router';
-import makeTheme from 'theme';
 
 import { Box, GlobalStyles } from '@mui/material';
 import { ThemeProvider } from '@mui/material';
 
+import { makeTheme } from '@chainlit/components/theme';
+
 import Hotkeys from 'components/Hotkeys';
 import SettingsModal from 'components/molecules/settingsModal';
 import Socket from 'components/socket';

diff --git a/frontend/src/components/atoms/ClipboardCopy.tsx b/frontend/src/components/atoms/ClipboardCopy.tsx
@@ -1,9 +1,10 @@
-import { grey } from 'palette';
 import { useCopyToClipboard, useToggle } from 'usehooks-ts';
 
 import CopyAll from '@mui/icons-material/CopyAll';
 import { IconButton, Tooltip } from '@mui/material';
 
+import { grey } from '@chainlit/components/theme';
+
 import useIsDarkMode from 'hooks/useIsDarkMode';
 
 interface ClipboardCopyProps {

diff --git a/frontend/src/components/atoms/Code.tsx b/frontend/src/components/atoms/Code.tsx
@@ -1,10 +1,11 @@
-import { grey } from 'palette';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
 import { PrismAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { Box } from '@mui/material';
 
+import { grey } from '@chainlit/components/theme';
+
 import useIsDarkMode from 'hooks/useIsDarkMode';
 
 import ClipboardCopy from './ClipboardCopy';

diff --git a/frontend/src/components/atoms/Link.tsx b/frontend/src/components/atoms/Link.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link as RRLink, LinkProps as RRLinkProps } from 'react-router-dom';
+
+import { Link as MLink, LinkProps as MLinkProps } from '@mui/material';
+
+type LinkProps = {
+ children: React.ReactNode;
+} & RRLinkProps &
+ MLinkProps;
+
+const Link = ({ children, ...rest }: LinkProps): JSX.Element => {
+ return (
+ <MLink component={RRLink} {...rest}>
+ {children}
+ </MLink>
+ );
+};
+
+export default Link;
diff --git a/frontend/src/components/atoms/buttons/button.tsx b/frontend/src/components/atoms/buttons/button.tsx
@@ -1,7 +1,7 @@
-import { grey } from 'palette';
-
 import Button, { ButtonProps } from '@mui/material/Button';
 
+import { grey } from '@chainlit/components/theme';
+
 interface Props extends ButtonProps {
  component?: any;
  to?: any;

diff --git a/frontend/src/components/atoms/element/audio.tsx b/frontend/src/components/atoms/element/audio.tsx
diff --git a/frontend/src/components/atoms/element/inlined/images.tsx b/frontend/src/components/atoms/element/inlined/images.tsx
diff --git a/frontend/src/components/atoms/element/inlined/texts.tsx b/frontend/src/components/atoms/element/inlined/texts.tsx
@@ -1,6 +1,6 @@
 import { Alert, AlertTitle, Stack } from '@mui/material';
 
-import { ITextElement } from 'types/element';
+import { ITextElement } from '@chainlit/components';
 
 import TextElement from '../text';
 

diff --git a/frontend/src/components/atoms/element/inlined/videos.tsx b/frontend/src/components/atoms/element/inlined/videos.tsx
diff --git a/frontend/src/components/atoms/element/pdf.tsx b/frontend/src/components/atoms/element/pdf.tsx
diff --git a/frontend/src/components/atoms/element/ref.tsx b/frontend/src/components/atoms/element/ref.tsx
@@ -3,9 +3,9 @@ import { useSetRecoilState } from 'recoil';
 
 import { Link } from '@mui/material';
 
-import { sideViewState } from 'state/element';
+import { IMessageElement } from '@chainlit/components';
 
-import { IMessageElement } from 'types/element';
+import { sideViewState } from 'state/element';
 
 interface Props {
  element: IMessageElement;