Initial commit

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+github: FunkyOz
+buy_me_a_coffee: funkyoz

.github/workflows/format.yml

@@ -0,0 +1,37 @@
+name: Format Check
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 19, 20, 21, 22, 23]
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: |
+        npm install
+
+    - name: Run analyse
+      run: |
+        npm run analyse
+
+    - name: Run lint
+      run: |
+        npm run lint 

.github/workflows/tests.yml

@@ -0,0 +1,33 @@
+name: Test Suite
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 19, 20, 21, 22, 23]
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: |
+        npm install
+
+    - name: Run tests
+      run: |
+        npm run tests 

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.cursorrules

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+dist
+coverage

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false
+}

README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+            tsconfigRootDir: import.meta.dirname,
+        },
+    },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from "eslint-plugin-react";
+
+export default tseslint.config({
+    // Set the react version
+    settings: { react: { version: "18.3" } },
+    plugins: {
+        // Add the react plugin
+        react,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended rules
+        ...react.configs.recommended.rules,
+        ...react.configs["jsx-runtime"].rules,
+    },
+});
+```

eslint.config.js

@@ -0,0 +1,21 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+    { languageOptions: { globals: globals.browser } },
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    pluginReact.configs.flat.recommended,
+    {
+        settings: { react: { version: "detect" } },
+        rules: {
+            "@typescript-eslint/no-explicit-any": "off",
+            "react-hooks/exhaustive-deps": "off",
+            "react/react-in-jsx-scope": "off",
+        },
+    },
+];

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

lib/components/chat/chat.tsx

@@ -0,0 +1,27 @@
+import { ChatProps } from "../../types";
+import { ChatWrapper, ChatContent, ChatContainer } from "./styles/chat.styles";
+import { useChat } from "./hooks/useChat";
+import { ChatProvider } from "../../provider";
+
+export const Chat = ({ withAutoFocus, children, assistantIcon }: ChatProps) => {
+    const { sidebar, messageInput, messages } = useChat(children);
+
+    return (
+        <ChatProvider
+            withAutoFocus={withAutoFocus}
+            assistantIcon={assistantIcon}
+        >
+            <ChatWrapper>
+                <ChatContent>
+                    {sidebar}
+                    <ChatContainer>
+                        {messages}
+                        {messageInput}
+                    </ChatContainer>
+                </ChatContent>
+            </ChatWrapper>
+        </ChatProvider>
+    );
+};
+
+export default Chat;

lib/components/chat/hooks/useChat.ts

@@ -0,0 +1,45 @@
+import React, { ReactNode, ReactElement, useMemo } from "react";
+import { Sidebar } from "../../../components/sidebar/sidebar";
+import { MessageInput } from "../../../components/message/message-input";
+import { Messages } from "../../../components/message/messages";
+type UseChatReturn = {
+    sidebar: ReactNode;
+    messageInput: ReactNode;
+    messages: ReactNode;
+};
+
+const isSidebarElement = (child: ReactNode): child is ReactElement => {
+    return React.isValidElement(child) && child.type === Sidebar;
+};
+
+const isMessageInputElement = (child: ReactNode): child is ReactElement => {
+    return React.isValidElement(child) && child.type === MessageInput;
+};
+
+const isMessagesElement = (child: ReactNode): child is ReactElement => {
+    return React.isValidElement(child) && child.type === Messages;
+};
+
+export const useChat = (children: ReactNode): UseChatReturn => {
+    const childrenAsArray = useMemo(() => {
+        return Array.isArray(children) ? children : [children];
+    }, [children]);
+
+    const sidebar = useMemo(() => {
+        return childrenAsArray.find(isSidebarElement);
+    }, [childrenAsArray]);
+
+    const messageInput = useMemo(() => {
+        return childrenAsArray.find(isMessageInputElement);
+    }, [childrenAsArray]);
+
+    const messages = useMemo(() => {
+        return childrenAsArray.find(isMessagesElement);
+    }, [childrenAsArray]);
+
+    return {
+        sidebar,
+        messageInput,
+        messages,
+    };
+};

lib/components/chat/styles/chat.styles.ts

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const ChatWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+`;
+
+export const ChatContent = styled.div`
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+`;
+
+export const ChatContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+    background-color: #ffffff;
+`;

lib/components/content/hooks/useMarkdownContent.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useState } from "react";
+
+const useMarkdownContent = (onCodeCopied?: (code: string) => void) => {
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = useCallback(
+        async (code: string) => {
+            if (isCopied) {
+                return;
+            }
+            try {
+                await navigator.clipboard.writeText(code);
+                if (onCodeCopied) {
+                    onCodeCopied(code);
+                }
+                setIsCopied(true);
+            } catch (err) {
+                console.error("Failed to copy: ", err);
+            }
+        },
+        [onCodeCopied, isCopied]
+    );
+
+    useEffect(() => {
+        if (isCopied) {
+            const timeout = setTimeout(() => setIsCopied(false), 5000);
+            return () => clearTimeout(timeout);
+        }
+    }, [isCopied]);
+
+    return { handleCopy, isCopied };
+};
+
+export default useMarkdownContent;