💬 Create ChatBubble, ChatInput components

src/App.js

@@ -19,11 +19,7 @@ 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: {
@@ -43,8 +39,12 @@ const App = () => {
 
  return (
  <div className="app">
- <ChatBubble></ChatBubble>
- <ChatInput></ChatInput>
+ <div className="chat-container">
+ {messages.map((msg, index) => (
+ <ChatBubble key={index} message={msg.message} isUser={msg.isUser} />
+ ))}
+ </div>
+ <ChatInput onSubmit={sendMessage} />
  </div>
  );
 };

src/components/ChatBubble.js

@@ -1,9 +1,11 @@
 import React from 'react';
 
-const ChatBubble = () => {
+const ChatBubble = ({ message, isUser }) => {
  return (
- <span> chat bubbles zone </span>
+ <div className={`chat-bubble ${isUser ? 'user' : 'chatgpt'}`}>
+ <p>{message}</p>
+ </div>
  );
 };
 
-export default ChatBubble;
+export default ChatBubble;

src/components/ChatInput.js

@@ -1,8 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+const ChatInput = ({ onSubmit }) => {
+ const [message, setMessage] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (message.trim()) {
+ onSubmit(message);
+ setMessage('');
+ }
+ };
 
-const ChatInput = () => {
  return (
- <span> chat input zone </span>
+ <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>
  );
 };