💅 Basic style chat interface with tailwind

package.json

@@ -6,15 +6,18 @@
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
+ "autoprefixer": "^10.4.14",
  "axios": "^0.26.1",
  "cors": "^2.8.5",
  "dotenv": "^16.0.3",
  "express": "^4.18.2",
  "gpt-turbo": "^1.6.0",
  "openai": "^3.2.1",
+ "postcss": "^8.4.21",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
+ "tailwindcss": "^3.2.7",
  "web-vitals": "^2.1.4"
  },
  "scripts": {

src/App.css

@@ -36,3 +36,15 @@
  transform: rotate(360deg);
  }
 }
+
+.chat-container {
+ @apply h-screen flex flex-col justify-between;
+}
+
+.chat-messages {
+ @apply overflow-y-auto p-4 flex flex-col gap-4;
+}
+
+.chat-input {
+ @apply bg-gray-100 p-4;
+}

src/App.js

@@ -19,7 +19,11 @@ const App = () => {
  const response = await axios.post(
  `${config.apiUrl}`,
  {
- prompt: 'only respond to new message. previous messages: ' + messages.map((msg) => msg.message).join(', ') + ', new message:' + message,
+ prompt:
+ 'only respond to new message. previous messages: ' +
+ messages.map((msg) => msg.message).join(', ') +
+ ', new message:' +
+ message,
  },
  {
  headers: {
@@ -38,13 +42,18 @@ const App = () => {
  };
 
  return (
- <div className="app">
- <div className="chat-container">
- {messages.map((msg, index) => (
- <ChatBubble key={index} message={msg.message} isUser={msg.isUser} />
- ))}
+ <div className="chat-container bg-gray-100">
+ <div className="mx-auto my-10 p-8 bg-white shadow-md rounded-xl w-full max-w-2xl">
+ <div className="chat-messages h-96">
+ {messages.map((msg, i) => (
+ <ChatBubble key={i} message={msg.message} isUser={msg.isUser} />
+ ))}
+ {/* <div ref={messagesEndRef} /> */}
+ </div>
+ <div className="chat-input mt-6">
+ <ChatInput onSubmit={sendMessage} />
+ </div>
  </div>
- <ChatInput onSubmit={sendMessage} />
  </div>
  );
 };

src/components/ChatBubble.js

@@ -1,11 +1,23 @@
 import React from 'react';
 
 const ChatBubble = ({ message, isUser }) => {
- return (
- <div className={`chat-bubble ${isUser ? 'user' : 'chatgpt'}`}>
- <p>{message}</p>
- </div>
- );
-};
+ const bubbleClasses = isUser
+ ? 'bg-blue-500 text-white rounded-br-none self-end'
+ : 'bg-gray-200 text-black rounded-bl-none self-start';
+
+ const tailClasses = isUser
+ ? 'right-0 -mr-2 bg-blue-500'
+ : 'left-0 -ml-2 bg-gray-200';
+
+ return (
+ <div className={`p-2 rounded-lg ${bubbleClasses} relative w-max mb-4`}>
+ <p>{message}</p>
+ <div
+ className={`w-4 h-4 absolute top-0 mt-2 rounded-bl-lg ${tailClasses}`}
+ />
+ </div>
+ );
+ };
+
 
-export default ChatBubble;
+export default ChatBubble;

src/components/ChatInput.js

@@ -1,27 +1,30 @@
 import React, { useState } from 'react';
 
 const ChatInput = ({ onSubmit }) => {
- const [message, setMessage] = useState('');
+ const [message, setMessage] = useState('');
 
- const handleSubmit = (e) => {
- e.preventDefault();
- if (message.trim()) {
- onSubmit(message);
- setMessage('');
- }
- };
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (!message.trim()) return;
 
- return (
- <form className="chat-input" onSubmit={handleSubmit}>
- <input
- type="text"
- placeholder="Type your message..."
- value={message}
- onChange={(e) => setMessage(e.target.value)}
- />
- <button type="submit">Send</button>
- </form>
- );
+ onSubmit(message);
+ setMessage('');
+ };
+
+ return (
+ <form onSubmit={handleSubmit} className="flex items-center gap-4">
+ <input
+ type="text"
+ value={message}
+ onChange={(e) => setMessage(e.target.value)}
+ placeholder="Type your message here..."
+ className="flex-grow border-2 border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:border-blue-300"
+ />
+ <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded-lg">
+ Send
+ </button>
+ </form>
+ );
 };
 
 export default ChatInput;

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './tailwind.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/tailwind.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}