+
+ {
+ auth ?
+
+ :
+ }
)
}
-function ChatWrapper() {
+type ChatWrapperProps = {
+ onSend?: (message: string) => void
+}
+
+function ChatWrapper({ onSend }: ChatWrapperProps) {
+ function handleSend() {
+ const target = document.getElementById("input") as HTMLInputElement;
+ const message = target.value.trim();
+ if (message.length > 0) {
+ onSend?.(message);
+ target.value = "";
+ }
+ }
+
+ window.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ handleSend();
+ }
+ });
+
return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable ChatGPT web feature
+
+
+
+
+
+
+
+
+
)
}
@@ -18,7 +93,7 @@ function Home() {
return (
-
+
)
}
diff --git a/renio/src/store/auth.ts b/renio/src/store/auth.ts
new file mode 100644
index 0000000..7972444
--- /dev/null
+++ b/renio/src/store/auth.ts
@@ -0,0 +1,60 @@
+import {createSlice} from "@reduxjs/toolkit";
+import axios from "axios";
+
+export const authSlice = createSlice({
+ name: 'auth',
+ initialState: {
+ token: '',
+ authenticated: false,
+ username: '',
+ },
+ reducers: {
+ setToken: (state, action) => {
+ state.token = action.payload as string;
+ axios.defaults.headers.common['Authorization'] = state.token;
+ localStorage.setItem('token', state.token);
+ },
+ setAuthenticated: (state, action) => {
+ state.authenticated = action.payload as boolean;
+ },
+ setUsername: (state, action) => {
+ state.username = action.payload as string;
+ },
+ logout: (state) => {
+ state.token = '';
+ state.authenticated = false;
+ state.username = '';
+ axios.defaults.headers.common['Authorization'] = '';
+ localStorage.removeItem('token');
+
+ location.reload();
+ },
+ }
+});
+
+
+export function validateToken(dispatch: any, token: string, hook?: () => any) {
+ token = token.trim();
+ dispatch(setToken(token));
+
+ if (token.length === 0) {
+ dispatch(setAuthenticated(false));
+ dispatch(setUsername(''));
+ return;
+ } else axios.post('/state')
+ .then(res => {
+ dispatch(setAuthenticated(res.data.status));
+ dispatch(setUsername(res.data.user));
+ hook && hook();
+ })
+ .catch(err => {
+ // keep state
+ console.debug(err);
+ });
+}
+
+export const selectAuthenticated = (state: any) => state.auth.authenticated;
+export const selectUsername = (state: any) => state.auth.username;
+
+export const {setToken, setAuthenticated, setUsername, logout} = authSlice.actions;
+export default authSlice.reducer;
diff --git a/renio/src/store/chat.ts b/renio/src/store/chat.ts
new file mode 100644
index 0000000..a153e77
--- /dev/null
+++ b/renio/src/store/chat.ts
@@ -0,0 +1,42 @@
+import {createSlice} from "@reduxjs/toolkit";
+
+type Message = {
+ id: string;
+ text: string;
+ isBot: boolean;
+}
+
+type initialStateType = {
+ messages: Message[];
+ gpt4: boolean;
+ web: boolean;
+}
+
+const chatSlice = createSlice({
+ name: 'chat',
+ initialState: {
+ messages: [],
+ gpt4: false,
+ web: false,
+ } as initialStateType,
+ reducers: {
+ setMessages: (state, action) => {
+ state.messages = action.payload;
+ },
+ setGPT4: (state, action) => {
+ state.gpt4 = action.payload;
+ },
+ setWeb: (state, action) => {
+ state.web = action.payload;
+ },
+ addMessage: (state, action) => {
+ state.messages.push(action.payload as Message);
+ },
+ setMessage: (state, action) => {
+ state.messages[state.messages.length - 1] = action.payload as Message;
+ }
+ }
+});
+
+export const {setMessages, addMessage, setMessage, setGPT4, setWeb} = chatSlice.actions;
+export default chatSlice.reducer;
diff --git a/renio/src/store/index.ts b/renio/src/store/index.ts
new file mode 100644
index 0000000..4412b7c
--- /dev/null
+++ b/renio/src/store/index.ts
@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit'
+import menuReducer from './menu'
+import authReducer from './auth'
+
+const store = configureStore({
+ reducer: {
+ menu: menuReducer,
+ auth: authReducer,
+ },
+});
+
+type RootState = ReturnType
;
+type AppDispatch = typeof store.dispatch;
+
+export type {RootState, AppDispatch};
+export default store;
diff --git a/renio/src/store/menu.ts b/renio/src/store/menu.ts
new file mode 100644
index 0000000..187c0c3
--- /dev/null
+++ b/renio/src/store/menu.ts
@@ -0,0 +1,25 @@
+import {createSlice} from "@reduxjs/toolkit";
+
+export const menuSlice = createSlice({
+ name: 'menu',
+ initialState: {
+ open: false,
+ },
+ reducers: {
+ toggleMenu: (state) => {
+ state.open = !state.open
+ },
+ closeMenu: (state) => {
+ state.open = false;
+ },
+ openMenu: (state) => {
+ state.open = true;
+ },
+ setMenu: (state, action) => {
+ state.open = action.payload as boolean;
+ }
+ },
+})
+
+export const {toggleMenu, closeMenu, openMenu, setMenu} = menuSlice.actions;
+export default menuSlice.reducer;
diff --git a/renio/src/store/utils.ts b/renio/src/store/utils.ts
new file mode 100644
index 0000000..75377a4
--- /dev/null
+++ b/renio/src/store/utils.ts
@@ -0,0 +1,13 @@
+import {useDispatch, useSelector} from "react-redux";
+
+export function dispatchWrapper(action: (state: any, payload?: any) => any) {
+ return (payload?: any) => {
+ const dispatch = useDispatch();
+ dispatch(action(payload));
+ };
+}
+
+export function getSelector(reducer: string, key: string) {
+ return useSelector((state: any) => state[reducer][key]);
+}
+