basic styling

Author: katrinar

README.md

@@ -1,12 +1,21 @@
 # LLM React App Javascript Template
 
+## What is a LLM React App Javascript Template?
+
 This a template project for a simple chat app connected to a Large Language Model (LLM). This is built on top of [the React template app from nano-react-app](https://github.com/nano-react-app/template-js). To connect the React app to an LLM, a Node server has been added to the project.
 
+These are the available commands:
+
 - `npm start-server` — This will start a development node backend server with a default port of `3100`.
 - `npm start` — This will start a development server for the react frontend app with a default port of `5173`.
 - `npm run build` — This will output a production build in the `dist` directory.
 - `npm run preview` — This will run the production build locally with a default port of `5173` (this will not work if you haven't generated the production build yet).
 
+## Getting Started
+
+To get started, create a `.env` file by copying the `SAMPLE_env` file. Then, add your Open API key to the file.
+Now you are ready to run the server and the web app.
+
 ## Custom port
 
 You can use the `-p` flag to specify a port for development. To do this, you can either run `npm start` with an additional flag:

server/index.js

@@ -8,7 +8,6 @@ import logger from 'koa-logger';
 // instantiate app
 const app = new Koa();
 
-console.log('process ', process.env.OPENAI_API_KEY);
 app.use(koaBody({
   jsonLimit: '10mb',
   formLimit: '10mb',

src/App.jsx

@@ -1,9 +1,22 @@
-import React from "react";
-import { Chat } from "./Chat";
-export default () => (
-  <>
-    <h1>Welcome to the LLM React App</h1>
-    <p>This app is connected to a large language model and ready to go. Ask it anything below.</p>
-    <Chat/>
-  </>
-);
+import React from 'react';
+import { Chat } from './Chat';
+
+export default () => {
+  const gridStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  };
+
+  return (
+    <>
+    <div style={gridStyle}>
+      <h1>Welcome to the LLM React App</h1>
+      <p>This app is connected to a large language model and ready to go. Ask it anything below.</p>
+      <Chat/>
+    </div>
+    
+    </>
+  )
+};

src/Chat.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { chatServices } from './services/chat-services';
-import { CircularProgress, Typography } from '@mui/material';
+import { Grid, CircularProgress, Typography } from '@mui/material';
 import { KeyboardReturn } from '@mui/icons-material';
 
 const Chat = () => {
@@ -23,10 +23,8 @@ const Chat = () => {
         try {
             setLoading(true);
             const { response } = await chatServices.create({ userInput });
-            console.log('the chat bot res ', response);
             setAnswer(response);
           } catch (err) {
-            console.log('err ', err);
             setError(err);
             return;
           } finally {
@@ -39,23 +37,47 @@ const Chat = () => {
           setAnswer('');
         }
       }, [userInput]);
+    
+    const gridStyle = {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+    };
+
+    const inputStyle = {
+      boxShadow: 24,
+      height: '25px',
+      width: '300px',
+      minWidth: '100px',
+    }
 
     return (
-        <div>
-            <input style={{ width: '50%', boxShadow: 24 }} 
+        <Grid container spacing={2} style={gridStyle}>
+          <Grid item xs={8} style={{ display: 'flex', flexDirection: 'row' }}>
+            <input style={inputStyle} 
                 value={userInput} 
                 onChange={handleInputChange}
                 onKeyDown={handlSendUserInput}
                 disabled={loading}
             >
             </input>
-            <KeyboardReturn style={{ cursor: 'pointer' }}/>
+            <div style={{ marginLeft: '5px', marginTop: '5px' }}>
+              <KeyboardReturn />
+            </div>
+          </Grid>
+          <Grid item xs={8}>
             <div>
-                {loading && <CircularProgress />}
+                {loading && <div>
+                  <CircularProgress color="secondary" />
+                  <CircularProgress color="success" />
+                  <CircularProgress color="inherit" />   
+                </div>}
                 {answer && <Typography>{answer}</Typography>}
                 {error && <p>Something bad happened</p>}
             </div>
-        </div>
+          </Grid>
+        </Grid>
     );
 };