Merge pull request #51 from odracirdev/feat/chat-loader

Feat/chat loader

frontend/src/components/ChatBox/index.tsx

@@ -8,13 +8,14 @@ import SenderButton from './SenderButton'
 type ChatMode = 'text' | 'audio'
 
 const ChatBox = () => {
- const [loading, setLoading] = useState(false)
  const [inputText, setInputText] = useState('')
  const initialMode = useMemo<ChatMode>(
  () => (inputText ? 'text' : 'audio'),
  [inputText]
  )
  const sendMessage = useChat((state) => state.appendTextMessage)
+ const setLoading = useChat((state) => state.setLoading)
+ const loading = useChat((state) => state.loading)
 
  const recognitionText = useSpeechRecognition((state) => state.text)
  const hasRecognitionSupport = useSpeechRecognition(

frontend/src/components/ChatBubble/index.tsx

@@ -26,9 +26,9 @@ const ChatBubble: FC<ChatBubbleProps> = ({ alignment = 'left', text }) => {
  />
  <div
  className={cn([
- 'space-y-2',
+ 'space-y-2 bg-stone-800/30 p-4 rounded-[6px] w-fit',
  {
- 'bg-zinc-800 text-white p-4 rounded-[6px] w-fit ml-auto':
+ 'bg-zinc-800 text-white w-fit ml-auto':
  alignment === 'right'
  }
  ])}

frontend/src/components/Loader/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import './style.css'
+
+const Loader: React.FC = () => {
+ return (
+ <section id="loader" className="dots-container">
+ <div className="dot"></div>
+ <div className="dot"></div>
+ <div className="dot"></div>
+ <div className="dot"></div>
+ <div className="dot"></div>
+ </section>
+ )
+}
+
+export default Loader

frontend/src/components/Loader/style.css

@@ -0,0 +1,52 @@
+.dots-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+}
+
+.dot {
+ height: 20px;
+ width: 20px;
+ margin-right: 10px;
+ border-radius: 10px;
+ background-color: #b3d4fc;
+ animation: pulse 1.5s infinite ease-in-out;
+}
+
+.dot:last-child {
+ margin-right: 0;
+}
+
+.dot:nth-child(1) {
+ animation-delay: -0.3s;
+}
+
+.dot:nth-child(2) {
+ animation-delay: -0.1s;
+}
+
+.dot:nth-child(3) {
+ animation-delay: 0.1s;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(0.8);
+ background-color: #b3d4fc;
+ box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
+ }
+
+ 50% {
+ transform: scale(1.2);
+ background-color: #6793fb;
+ box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
+ }
+
+ 100% {
+ transform: scale(0.8);
+ background-color: #b3d4fc;
+ box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
+ }
+}

frontend/src/contexts/chat.ts

@@ -3,9 +3,15 @@ import { devtools } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 import type { Message, RoleMessage } from '../contracts/messages.contract'
 
-type ChatState = { messages: Message[] }
+type ChatState = {
+ messages: Message[]
+ loading: boolean
+}
 
-type ChatActions = { appendTextMessage(msg: string, role: RoleMessage): void }
+type ChatActions = {
+ appendTextMessage(msg: string, role: RoleMessage): void
+ setLoading(loading: boolean): void
+}
 
 type ChatStore = ChatState & ChatActions
 
@@ -15,7 +21,8 @@ const INITIAL_STATE: ChatState = {
  role: 'assistant',
  content: { type: 'text', text: 'Hola, ¿en qué puedo ayudarte hoy?' }
  }
- ]
+ ],
+ loading: false
 }
 
 const useChat = create<ChatStore>()(
@@ -26,9 +33,18 @@ const useChat = create<ChatStore>()(
  set(
  (state) => {
  state.messages.push({ role, content: { type: 'text', text: msg } })
+ // state.loading = false
  },
  false,
  'appendTextMessage'
+ ),
+ setLoading: (loading) =>
+ set(
+ (state) => {
+ state.loading = loading
+ },
+ false,
+ 'setLoading'
  )
  }))
  )

frontend/src/pages/Chat/index.tsx

@@ -9,11 +9,13 @@ import ChatBubble from '../../components/ChatBubble'
 import useChat from '../../contexts/chat'
 import useSpeechRecognition from '../../contexts/speech-recognition'
 import './index.css'
+import Loader from '@/components/Loader'
 import CVView from '@/components/CVView'
 
 export default function Chat() {
  const initSpeechRecognition = useSpeechRecognition((state) => state.init)
  const messages = useChat((state) => state.messages)
+ const loading = useChat((state) => state.loading)
 
  const chatRef = useRef<HTMLDivElement>(null)
 
@@ -67,6 +69,9 @@ export default function Chat() {
  alignment={role === 'assistant' ? 'left' : 'right'}
  />
  ))}
+ {
+ loading && <Loader />
+ }
  </div>
  </div>
  </div>