-
-
- Edit src/App.tsx
and save to test HMR
-
+
{title}
+
+
+
+
+
-
- Click on the Vite and React logos to learn more
-
>
- )
+ );
}
export default App
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/assets/robot.png b/2-copy-of-code/lesson-11/chatbot-project-ts/src/assets/robot.png
new file mode 100644
index 0000000..e28f255
Binary files /dev/null and b/2-copy-of-code/lesson-11/chatbot-project-ts/src/assets/robot.png differ
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/assets/user.png b/2-copy-of-code/lesson-11/chatbot-project-ts/src/assets/user.png
new file mode 100644
index 0000000..15ec534
Binary files /dev/null and b/2-copy-of-code/lesson-11/chatbot-project-ts/src/assets/user.png differ
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatInput.css b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatInput.css
new file mode 100644
index 0000000..950031a
--- /dev/null
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatInput.css
@@ -0,0 +1,24 @@
+.send-button {
+ background-color: rgb(25, 135, 84);
+ color: white;
+ padding: 12px 20px;
+ margin-left: 10px;
+ border: none;
+ border-radius: 10px;
+ font-size: 15px;
+ cursor: pointer;
+}
+
+.chat-input {
+ padding: 12px 15px;
+ border-radius: 10px;
+ border-width: 1px;
+ font-size: 15px;
+
+ flex-grow: 1;
+}
+
+.chat-input-container {
+ display: flex;
+ margin-bottom: 60px;
+}
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatInput.jsx b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatInput.jsx
new file mode 100644
index 0000000..95829c6
--- /dev/null
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatInput.jsx
@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Chatbot } from 'supersimpledev';
+import './ChatInput.css';
+
+export function ChatInput({ chatMessages, setChatMessages }) {
+ const [inputText, setInputText] = useState('');
+
+ function saveInputText(event) {
+ setInputText(event.target.value);
+ }
+
+ function sendMessage() {
+ const newChatMessages = [
+ ...chatMessages,
+ {
+ message: inputText,
+ sender: 'user',
+ id: crypto.randomUUID()
+ }
+ ];
+
+ setChatMessages(newChatMessages);
+
+ const response = Chatbot.getResponse(inputText);
+ setChatMessages([
+ ...newChatMessages,
+ {
+ message: response,
+ sender: 'robot',
+ id: crypto.randomUUID()
+ }
+ ]);
+
+ setInputText('');
+ }
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessage.css b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessage.css
new file mode 100644
index 0000000..e1fa498
--- /dev/null
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessage.css
@@ -0,0 +1,24 @@
+.chat-message-user {
+ display: flex;
+ justify-content: end;
+ align-items: start;
+}
+
+.chat-message-robot {
+ display: flex;
+ align-items: start;
+}
+
+.chat-message-text {
+ background-color: rgb(238, 238, 238);
+ padding: 15px 20px;
+ border-radius: 10px;
+ margin-right: 10px;
+ margin-left: 10px;
+ margin-bottom: 20px;
+ max-width: 300px;
+}
+
+.chat-message-profile {
+ width: 45px;
+}
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessage.jsx b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessage.jsx
new file mode 100644
index 0000000..d7c7415
--- /dev/null
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessage.jsx
@@ -0,0 +1,38 @@
+import RobotProfileImage from '../assets/robot.png';
+import UserProfileImage from '../assets/user.png';
+import './ChatMessage.css';
+
+export function ChatMessage({ message, sender }) {
+ // const message = props.message;
+ // const sender = props.sender;
+ // const { message, sender } = props;
+
+ /*
+ if (sender === 'robot') {
+ return (
+
+

+ {message}
+
+ );
+ }
+ */
+
+ return (
+
+ {sender === 'robot' && (
+

+ )}
+
+ {message}
+
+ {sender === 'user' && (
+

+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessages.css b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessages.css
new file mode 100644
index 0000000..a767ffa
--- /dev/null
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessages.css
@@ -0,0 +1,7 @@
+.chat-messages-container {
+ flex-grow: 1;
+ margin-top: 20px;
+ overflow: scroll;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessages.jsx b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessages.jsx
new file mode 100644
index 0000000..389fd81
--- /dev/null
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/components/ChatMessages.jsx
@@ -0,0 +1,30 @@
+import { useRef, useEffect } from 'react'
+import { ChatMessage } from './ChatMessage';
+import './ChatMessages.css';
+
+function ChatMessages({ chatMessages }) {
+ const chatMessagesRef = useRef(null);
+
+ useEffect(() => {
+ const containerElem = chatMessagesRef.current;
+ if (containerElem) {
+ containerElem.scrollTop = containerElem.scrollHeight;
+ }
+ }, [chatMessages]);
+
+ return (
+
+ {chatMessages.map((chatMessage) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default ChatMessages;
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/index.css b/2-copy-of-code/lesson-11/chatbot-project-ts/src/index.css
index 08a3ac9..ca4f022 100644
--- a/2-copy-of-code/lesson-11/chatbot-project-ts/src/index.css
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/index.css
@@ -1,68 +1,5 @@
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+ font-family: Arial;
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/src/main.tsx b/2-copy-of-code/lesson-11/chatbot-project-ts/src/main.tsx
index bef5202..b9a1a6d 100644
--- a/2-copy-of-code/lesson-11/chatbot-project-ts/src/main.tsx
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/src/main.tsx
@@ -1,9 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
-import App from './App.tsx'
+import App from './App.jsx'
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById('root')).render(
,
diff --git a/2-copy-of-code/lesson-11/chatbot-project-ts/vite.config.ts b/2-copy-of-code/lesson-11/chatbot-project-ts/vite.config.ts
index 8b0f57b..f093458 100644
--- a/2-copy-of-code/lesson-11/chatbot-project-ts/vite.config.ts
+++ b/2-copy-of-code/lesson-11/chatbot-project-ts/vite.config.ts
@@ -3,5 +3,9 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [react({
+ babel: {
+ plugins: [['babel-plugin-react-compiler', { target: '19' }]],
+ },
+ })],
})