Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 00:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

reorganize components and add root import plugin

Browse source
This commit is contained in:
Danny Avila 2023-02-07 10:26:19 -05:00
parent faf8800e67
commit 9d41ed4615
27 changed files with 76 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.babelrc
View file

@ -11,6 +11,13 @@
Babel's code transformations are enabled by applying plugins (or presets) to your configuration file. Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
*/ */
"plugins": [ "plugins": [
"@babel/plugin-transform-runtime" "@babel/plugin-transform-runtime",
[
"babel-plugin-root-import",
{
"rootPathPrefix": "~/",
"rootPathSuffix": "./src"
}
]
] ]
} }

1
.gitignore vendored
View file

@ -22,6 +22,7 @@ coverage
build/ build/
dist/ dist/
public/main.js public/main.js
public/main.js.map
# Dependency directorys # Dependency directorys
# Deployed apps should consider commenting these lines out: # Deployed apps should consider commenting these lines out:

2
index.js
View file

@ -2,7 +2,7 @@ import React from 'react';
// import reactDom from 'react-dom'; ---> deprecated // import reactDom from 'react-dom'; ---> deprecated
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { store } from './store'; import { store } from './src/store';
import App from './src/App'; import App from './src/App';
import './src/style.css'; import './src/style.css';

36
package-lock.json generated
View file

@ -35,6 +35,7 @@
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"babel-loader": "^9.1.2", "babel-loader": "^9.1.2",
"babel-plugin-root-import": "^6.6.0",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"css-loader": "^6.7.3", "css-loader": "^6.7.3",
"eslint": "^8.33.0", "eslint": "^8.33.0",
@ -4711,6 +4712,24 @@
"@babel/core": "^7.0.0-0" "@babel/core": "^7.0.0-0"
} }
}, },
"node_modules/babel-plugin-root-import": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-6.6.0.tgz",
"integrity": "sha512-SPzVOHd7nDh5loZwZBxtX/oOu1MXeKjTkz+1VnnzLWC0dk8sJIGC2IDQ2uWIBjE5mUtXlQ35MTHSqN0Xn7qHrg==",
"dev": true,
"dependencies": {
"slash": "^3.0.0"
}
},
"node_modules/babel-plugin-root-import/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/babel-plugin-syntax-flow": { "node_modules/babel-plugin-syntax-flow": {
"version": "6.18.0", "version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
@ -15958,6 +15977,23 @@
"@babel/helper-define-polyfill-provider": "^0.3.3" "@babel/helper-define-polyfill-provider": "^0.3.3"
} }
}, },
"babel-plugin-root-import": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-6.6.0.tgz",
"integrity": "sha512-SPzVOHd7nDh5loZwZBxtX/oOu1MXeKjTkz+1VnnzLWC0dk8sJIGC2IDQ2uWIBjE5mUtXlQ35MTHSqN0Xn7qHrg==",
"dev": true,
"requires": {
"slash": "^3.0.0"
},
"dependencies": {
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
"dev": true
}
}
},
"babel-plugin-syntax-flow": { "babel-plugin-syntax-flow": {
"version": "6.18.0", "version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",

1
package.json
View file

@ -47,6 +47,7 @@
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"babel-loader": "^9.1.2", "babel-loader": "^9.1.2",
"babel-plugin-root-import": "^6.6.0",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"css-loader": "^6.7.3", "css-loader": "^6.7.3",
"eslint": "^8.33.0", "eslint": "^8.33.0",

3
public/index.html
View file

@ -2,7 +2,8 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Webpack App</title> <title>ChatGPT Clone</title>
<link rel="shortcut icon" href="#">
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head> <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
<body> <body>
<div id="root"></div> <div id="root"></div>

6
src/App.jsx
View file

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Messages from './components/Messages'; import Messages from './components/main/Messages';
import TextChat from './components/TextChat'; import TextChat from './components/main/TextChat';
import Nav from './components/Nav'; import Nav from './components/Nav';
import MobileNav from './components/MobileNav'; import MobileNav from './components/Nav/MobileNav';
import useSWR from 'swr'; import useSWR from 'swr';
const fetcher = (url) => fetch(url).then((res) => res.json()); const fetcher = (url) => fetch(url).then((res) => res.json());

4
src/components/Conversation.jsx → src/components/Conversations/Conversation.jsx
View file

@ -2,8 +2,8 @@ import React from 'react';
import RenameButton from './RenameButton'; import RenameButton from './RenameButton';
import DeleteButton from './DeleteButton'; import DeleteButton from './DeleteButton';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { setConversation } from '../../store/convoSlice'; import { setConversation } from '~/store/convoSlice';
import { setMessages } from '../../store/messageSlice'; import { setMessages } from '~/store/messageSlice';
import useSWRMutation from 'swr/mutation'; import useSWRMutation from 'swr/mutation';
const fetcher = (url) => fetch(url).then((res) => res.json()); const fetcher = (url) => fetch(url).then((res) => res.json());

6
src/components/DeleteButton.jsx → src/components/Conversations/DeleteButton.jsx
View file

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import TrashIcon from '../svg/TrashIcon';
export default function DeleteButton({ onClick, disabled }) { export default function DeleteButton({ onClick, disabled }) {
return ( return (
<button className="p-1 hover:text-white"> <button className="p-1 hover:text-white">
<svg <TrashIcon />
{/* <svg
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
strokeWidth="2" strokeWidth="2"
@ -29,7 +31,7 @@ export default function DeleteButton({ onClick, disabled }) {
x2="14" x2="14"
y2="17" y2="17"
/> />
</svg> </svg> */}
</button> </button>
); );
} }

0
src/components/RenameButton.jsx → src/components/Conversations/RenameButton.jsx
View file

0
src/components/Conversations.jsx → src/components/Conversations/index.jsx
View file

0
src/components/MobileNav.jsx → src/components/Nav/MobileNav.jsx
View file

0
src/components/NavLink.jsx → src/components/Nav/NavLink.jsx
View file

6
src/components/NavLinks.jsx → src/components/Nav/NavLinks.jsx
View file

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import NavLink from './NavLink'; import NavLink from './NavLink';
import TrashIcon from './svg/TrashIcon'; import TrashIcon from '../svg/TrashIcon';
import DarkModeIcon from './svg/DarkModeIcon'; import DarkModeIcon from '../svg/DarkModeIcon';
import LogOutIcon from './svg/LogOutIcon'; import LogOutIcon from '../svg/LogOutIcon';
export default function NavLinks() { export default function NavLinks() {
return ( return (

0
src/components/NewChat.jsx → src/components/Nav/NewChat.jsx
View file

2
src/components/Nav.jsx → src/components/Nav/index.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import NewChat from './NewChat'; import NewChat from './NewChat';
import Conversations from './Conversations'; import Conversations from '../Conversations';
import NavLinks from './NavLinks'; import NavLinks from './NavLinks';
export default function Nav({ conversations }) { export default function Nav({ conversations }) {

0
src/components/Message.jsx → src/components/main/Message.jsx
View file

0
src/components/Messages.jsx → src/components/main/Messages.jsx
View file

0
src/components/SubmitButton.jsx → src/components/main/SubmitButton.jsx
View file

6
src/components/TextChat.jsx → src/components/main/TextChat.jsx
View file

@ -1,10 +1,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
import TextareaAutosize from 'react-textarea-autosize'; import TextareaAutosize from 'react-textarea-autosize';
import handleSubmit from '../utils/handleSubmit'; import handleSubmit from '~/utils/handleSubmit';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { setConversation } from '../../store/convoSlice'; import { setConversation } from '~/store/convoSlice';
import { setMessages } from '../../store/messageSlice'; import { setMessages } from '~/store/messageSlice';
export default function TextChat({ messages, reloadConvos }) { export default function TextChat({ messages, reloadConvos }) {
const [text, setText] = useState(''); const [text, setText] = useState('');

2
src/components/svg/DarkModeIcon.jsx
View file

@ -14,7 +14,7 @@ export default function DarkModeIcon() {
width="1em" width="1em"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg> </svg>
); );
} }

6
src/components/svg/LogOutIcon.jsx
View file

@ -14,14 +14,14 @@ export default function LogOutIcon() {
width="1em" width="1em"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<polyline points="16 17 21 12 16 7"></polyline> <polyline points="16 17 21 12 16 7" />
<line <line
x1="21" x1="21"
y1="12" y1="12"
x2="9" x2="9"
y2="12" y2="12"
></line> />
</svg> </svg>
); );
} }

8
src/components/svg/TrashIcon.jsx
View file

@ -14,20 +14,20 @@ export default function TrashIcon() {
width="1em" width="1em"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<polyline points="3 6 5 6 21 6"></polyline> <polyline points="3 6 5 6 21 6" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
<line <line
x1="10" x1="10"
y1="11" y1="11"
x2="10" x2="10"
y2="17" y2="17"
></line> />
<line <line
x1="14" x1="14"
y1="11" y1="11"
x2="14" x2="14"
y2="17" y2="17"
></line> />
</svg> </svg>
); );
} }

0
store/convoSlice.js → src/store/convoSlice.js
View file

2
store/index.js → src/store/index.js
View file

@ -8,4 +8,4 @@ export const store = configureStore({
convo: convoReducer, convo: convoReducer,
messages: messageReducer, messages: messageReducer,
}, },
}); });

0
store/messageSlice.js → src/store/messageSlice.js
View file

3
webpack.config.js
View file

@ -1,4 +1,5 @@
const path = require('path'); const path = require('path');
require('dotenv').config();
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
/*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve. /*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve.
@ -9,7 +10,7 @@ module.exports = {
* the environment - development, production, none. tells webpack * the environment - development, production, none. tells webpack
* to use its built-in optimizations accordingly. default is production * to use its built-in optimizations accordingly. default is production
*/ */
mode: 'development', mode: process.env.NODE_ENV,
/** "entry" /** "entry"
* the entry point * the entry point
*/ */