feat: add voice recognition, logo positioning, and UI improvements
This commit is contained in:
Yashwin
parent
1294756aea
commit
7e6f65bc82
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<title>AI Chat Interface</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1726
package-lock.json
generated
Normal file
1726
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "chatbot-ui",
|
||||
"version": "1.0.0",
|
||||
"description": "AI Chat Interface with Modern Design",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"lucide-react": "^0.294.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"vite": "^5.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/0x0.png
Normal file
BIN
public/0x0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
8
src/App.jsx
Normal file
8
src/App.jsx
Normal file
@ -0,0 +1,8 @@
|
||||
import ChatInterface from './components/ChatInterface'
|
||||
|
||||
function App() {
|
||||
return <ChatInterface />
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
488
src/components/ChatInterface.css
Normal file
488
src/components/ChatInterface.css
Normal file
@ -0,0 +1,488 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: radial-gradient(
|
||||
circle at center center,
|
||||
#ffffff 0%,
|
||||
#fdf2f8 50%,
|
||||
#eef2ff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80px 20px 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header Logo */
|
||||
.header-logo {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
margin-bottom: 0px;
|
||||
width: auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
max-width: 120px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Greeting Container */
|
||||
.greeting-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.greeting-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(to right, #8B5CF6, #EC4899);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Main Heading */
|
||||
.main-heading {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #111827;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 48px 0;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Messages Container */
|
||||
.messages-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-bottom: 40px;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Message Wrapper */
|
||||
.message-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message-wrapper.user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* Message Label */
|
||||
.message-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 8px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* User Message Label (ME) */
|
||||
.message-wrapper.user .message-label {
|
||||
background-color: #4da6ff;
|
||||
color: #ffffff;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* AI Message Label (Chatbot) */
|
||||
.message-wrapper.ai .message-label {
|
||||
color: #9ca3af;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Message Bubble */
|
||||
.message-bubble {
|
||||
width: fit-content;
|
||||
max-width: 85%;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-bubble.user {
|
||||
padding: 12px 16px;
|
||||
background-color: #4da6ff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.message-bubble.user .message-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.message-bubble.ai {
|
||||
padding: 16px 20px;
|
||||
max-width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Message Image Container */
|
||||
.message-image-container {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message-image {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.message-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.message-bubble.ai .message-image-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.message-bubble.ai .message-image-container:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Message Text */
|
||||
.message-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-bubble.ai .message-text {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.message-bubble.ai .message-text:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Structured Message Content */
|
||||
.message-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.message-section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message-section-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 10px 0;
|
||||
padding: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-section-list {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.message-section-item {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #374151;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.message-section-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Input Container */
|
||||
.input-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0 100px 0 20px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 12px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #111827;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.chat-input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
border-color: #94a3b8;
|
||||
box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
|
||||
}
|
||||
|
||||
.send-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
background: rgba(148, 163, 184, 0.1);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.send-button:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
.send-button:focus {
|
||||
outline: 2px solid rgba(148, 163, 184, 0.3);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.send-button svg {
|
||||
stroke-width: 1.5;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.send-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.send-button:disabled:hover {
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.voice-button {
|
||||
position: absolute;
|
||||
right: 52px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.voice-button:hover {
|
||||
background: rgba(148, 163, 184, 0.1);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.voice-button:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
.voice-button:focus {
|
||||
outline: 2px solid rgba(148, 163, 184, 0.3);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.voice-button svg {
|
||||
stroke-width: 1.5;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.voice-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.voice-button:disabled:hover {
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.voice-button .listening {
|
||||
color: #ef4444;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading Indicator */
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.chat-content {
|
||||
padding: 60px 16px 32px;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 28px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.message-bubble.ai {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
height: 52px;
|
||||
padding: 0 96px 0 16px;
|
||||
}
|
||||
|
||||
.voice-button {
|
||||
right: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
right: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
363
src/components/ChatInterface.jsx
Normal file
363
src/components/ChatInterface.jsx
Normal file
@ -0,0 +1,363 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Send, Loader2, Mic } from 'lucide-react'
|
||||
import { sendQuery } from '../services/api'
|
||||
import { formatStructuredMessage } from '../utils/formatMessage'
|
||||
import './ChatInterface.css'
|
||||
|
||||
const ChatInterface = () => {
|
||||
const [messages, setMessages] = useState([])
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [isListening, setIsListening] = useState(false)
|
||||
const messagesEndRef = useRef(null)
|
||||
const recognitionRef = useRef(null)
|
||||
const baseInputValueRef = useRef('')
|
||||
|
||||
const getTimeBasedGreeting = () => {
|
||||
const hour = new Date().getHours()
|
||||
if (hour >= 5 && hour < 12) {
|
||||
return 'Hi, Good Morning!'
|
||||
} else if (hour >= 12 && hour < 17) {
|
||||
return 'Hi, Good Afternoon!'
|
||||
} else if (hour >= 17 && hour < 21) {
|
||||
return 'Hi, Good Evening!'
|
||||
} else {
|
||||
return 'Hi, Good Night!'
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0) {
|
||||
scrollToBottom()
|
||||
}
|
||||
}, [messages])
|
||||
|
||||
// Initialize Speech Recognition
|
||||
useEffect(() => {
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
|
||||
|
||||
if (!SpeechRecognition) {
|
||||
console.warn('Speech recognition not supported in this browser')
|
||||
return
|
||||
}
|
||||
|
||||
const recognition = new SpeechRecognition()
|
||||
recognition.continuous = false
|
||||
recognition.interimResults = true
|
||||
recognition.lang = 'en-US'
|
||||
|
||||
recognition.onstart = () => {
|
||||
setIsListening(true)
|
||||
console.log('Speech recognition started')
|
||||
}
|
||||
|
||||
recognition.onresult = (event) => {
|
||||
let interimTranscript = ''
|
||||
let finalTranscript = ''
|
||||
|
||||
for (let i = event.resultIndex; i < event.results.length; i++) {
|
||||
const transcript = event.results[i][0].transcript
|
||||
if (event.results[i].isFinal) {
|
||||
finalTranscript += transcript + ' '
|
||||
} else {
|
||||
interimTranscript += transcript
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Speech recognition result:', { finalTranscript, interimTranscript })
|
||||
|
||||
// Combine base value with final and interim transcripts
|
||||
const baseText = baseInputValueRef.current
|
||||
let newValue = baseText
|
||||
|
||||
if (finalTranscript) {
|
||||
newValue = (baseText ? baseText + ' ' : '') + finalTranscript.trim()
|
||||
baseInputValueRef.current = newValue // Update base for next recognition
|
||||
console.log('Final transcript added, new value:', newValue)
|
||||
} else if (interimTranscript) {
|
||||
newValue = (baseText ? baseText + ' ' : '') + interimTranscript
|
||||
console.log('Interim transcript added, new value:', newValue)
|
||||
}
|
||||
|
||||
setInputValue(newValue)
|
||||
}
|
||||
|
||||
recognition.onerror = (event) => {
|
||||
console.error('Speech recognition error:', event.error)
|
||||
setIsListening(false)
|
||||
|
||||
if (event.error === 'no-speech') {
|
||||
console.log('No speech detected')
|
||||
// Don't show alert for no-speech, just stop
|
||||
} else if (event.error === 'not-allowed') {
|
||||
alert('Microphone permission denied. Please enable microphone access in your browser settings.')
|
||||
} else if (event.error === 'aborted') {
|
||||
console.log('Speech recognition aborted')
|
||||
} else {
|
||||
console.error('Speech recognition error:', event.error)
|
||||
}
|
||||
}
|
||||
|
||||
recognition.onend = () => {
|
||||
setIsListening(false)
|
||||
console.log('Speech recognition ended')
|
||||
}
|
||||
|
||||
recognitionRef.current = recognition
|
||||
|
||||
return () => {
|
||||
if (recognitionRef.current) {
|
||||
try {
|
||||
recognitionRef.current.stop()
|
||||
} catch (e) {
|
||||
// Ignore errors when stopping
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleSend = async () => {
|
||||
const query = inputValue.trim()
|
||||
if (!query || isLoading) return
|
||||
|
||||
// Add user message to chat
|
||||
const userMessage = {
|
||||
type: 'user',
|
||||
text: query
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, userMessage])
|
||||
setInputValue('')
|
||||
setIsLoading(true)
|
||||
|
||||
// Add loading message
|
||||
const loadingMessage = {
|
||||
type: 'ai',
|
||||
text: '',
|
||||
isLoading: true
|
||||
}
|
||||
setMessages(prev => [...prev, loadingMessage])
|
||||
|
||||
try {
|
||||
// Call API
|
||||
const response = await sendQuery(query)
|
||||
|
||||
// Replace loading message with actual response
|
||||
const answerText = response.answer || response.message || 'Sorry, I could not process your query.'
|
||||
const structuredMessage = formatStructuredMessage(answerText)
|
||||
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev]
|
||||
const loadingIndex = newMessages.findIndex(msg => msg.isLoading === true)
|
||||
if (loadingIndex !== -1) {
|
||||
newMessages[loadingIndex] = {
|
||||
type: 'ai',
|
||||
text: answerText,
|
||||
structuredMessage: structuredMessage,
|
||||
imageUrl: response.source?.property_image_url || null,
|
||||
isLoading: false
|
||||
}
|
||||
}
|
||||
return newMessages
|
||||
})
|
||||
} catch (error) {
|
||||
// Replace loading message with error message
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev]
|
||||
const loadingIndex = newMessages.findIndex(msg => msg.isLoading === true)
|
||||
if (loadingIndex !== -1) {
|
||||
newMessages[loadingIndex] = {
|
||||
type: 'ai',
|
||||
text: 'Sorry, there was an error processing your query. Please try again.',
|
||||
isLoading: false
|
||||
}
|
||||
}
|
||||
return newMessages
|
||||
})
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}
|
||||
|
||||
const handleVoiceToggle = () => {
|
||||
if (!recognitionRef.current) {
|
||||
alert('Speech recognition is not supported in your browser. Please use Chrome, Edge, or Safari.')
|
||||
return
|
||||
}
|
||||
|
||||
if (isListening) {
|
||||
try {
|
||||
recognitionRef.current.stop()
|
||||
setIsListening(false)
|
||||
} catch (error) {
|
||||
console.error('Error stopping speech recognition:', error)
|
||||
setIsListening(false)
|
||||
}
|
||||
} else {
|
||||
// Store current input value as base before starting
|
||||
baseInputValueRef.current = inputValue.trim()
|
||||
console.log('Starting voice recognition, base text:', baseInputValueRef.current)
|
||||
|
||||
try {
|
||||
recognitionRef.current.start()
|
||||
} catch (error) {
|
||||
console.error('Error starting speech recognition:', error)
|
||||
// If recognition is already running, try to stop and restart
|
||||
if (error.message && error.message.includes('already started')) {
|
||||
try {
|
||||
recognitionRef.current.stop()
|
||||
setTimeout(() => {
|
||||
recognitionRef.current.start()
|
||||
}, 100)
|
||||
} catch (retryError) {
|
||||
console.error('Error retrying speech recognition:', retryError)
|
||||
setIsListening(false)
|
||||
}
|
||||
} else {
|
||||
setIsListening(false)
|
||||
alert('Could not start voice recognition. Please check your microphone permissions.')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="chat-container">
|
||||
<div className="chat-content">
|
||||
{/* Header Logo */}
|
||||
<div className="header-logo">
|
||||
<img
|
||||
src="/0x0.png"
|
||||
alt="ONE BROKER GROUP"
|
||||
className="logo-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Show greeting and heading only when no messages */}
|
||||
{messages.length === 0 && (
|
||||
<>
|
||||
{/* Greeting Message - Above heading */}
|
||||
<div className="greeting-container">
|
||||
<p className="greeting-text">{getTimeBasedGreeting()}</p>
|
||||
</div>
|
||||
|
||||
{/* Main Heading - Below greeting */}
|
||||
<h1 className="main-heading">
|
||||
Exploring Dubai real estate?<br />
|
||||
Ask our smart chatbot
|
||||
</h1>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Messages Container - Show when there are messages */}
|
||||
{messages.length > 0 && (
|
||||
<div className="messages-container">
|
||||
{messages.map((message, index) => (
|
||||
<div key={index} className={`message-wrapper ${message.type}`}>
|
||||
<div className="message-label">
|
||||
{message.type === 'user' ? 'ME' : 'Chatbot'}
|
||||
</div>
|
||||
<div className={`message-bubble ${message.type}`}>
|
||||
{message.isLoading ? (
|
||||
<div className="loading-indicator">
|
||||
<Loader2 size={20} className="spinner" />
|
||||
<span>Thinking...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{message.imageUrl && (
|
||||
<div className="message-image-container">
|
||||
<img
|
||||
src={message.imageUrl}
|
||||
alt="Property"
|
||||
className="message-image"
|
||||
onError={(e) => {
|
||||
e.target.style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{message.structuredMessage && message.structuredMessage.sections.length > 0 ? (
|
||||
<div className="message-content">
|
||||
{message.structuredMessage.intro && (
|
||||
<p className="message-text">{message.structuredMessage.intro}</p>
|
||||
)}
|
||||
{message.structuredMessage.sections.map((section, idx) => (
|
||||
<div key={idx} className="message-section">
|
||||
<h3 className="message-section-title">{section.title}:</h3>
|
||||
<ul className="message-section-list">
|
||||
{section.content.map((item, itemIdx) => (
|
||||
<li key={itemIdx} className="message-section-item">{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : message.text && (
|
||||
<p className="message-text">{message.text}</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input Field */}
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="text"
|
||||
className="chat-input"
|
||||
placeholder="Ask me anything about Dubai real estate"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<button
|
||||
className="voice-button"
|
||||
onClick={handleVoiceToggle}
|
||||
type="button"
|
||||
disabled={isLoading}
|
||||
aria-label={isListening ? 'Stop listening' : 'Start voice input'}
|
||||
title={isListening ? 'Stop listening' : 'Start voice input'}
|
||||
>
|
||||
<Mic
|
||||
size={20}
|
||||
strokeWidth={1.5}
|
||||
className={isListening ? 'listening' : ''}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
className="send-button"
|
||||
onClick={handleSend}
|
||||
type="button"
|
||||
disabled={isLoading || !inputValue.trim()}
|
||||
aria-label="Send message"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={20} strokeWidth={1.5} className="spinner" />
|
||||
) : (
|
||||
<Send size={20} strokeWidth={1.5} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChatInterface
|
||||
|
||||
17
src/index.css
Normal file
17
src/index.css
Normal file
@ -0,0 +1,17 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
11
src/main.jsx
Normal file
11
src/main.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
26
src/services/api.js
Normal file
26
src/services/api.js
Normal file
@ -0,0 +1,26 @@
|
||||
const API_BASE_URL = 'https://property-bot.tech4bizsolutions.com/api/v1/property/query'
|
||||
|
||||
export const sendQuery = async (query) => {
|
||||
try {
|
||||
const response = await fetch(API_BASE_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: query,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error('Error sending query:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
130
src/utils/formatMessage.js
Normal file
130
src/utils/formatMessage.js
Normal file
@ -0,0 +1,130 @@
|
||||
export const formatStructuredMessage = (text) => {
|
||||
if (!text) return null
|
||||
|
||||
// Enhanced section patterns - look for headers with word boundaries to avoid partial matches
|
||||
const sectionPatterns = [
|
||||
{
|
||||
patterns: [/\bproject specifications?:?\b/i],
|
||||
title: 'Project Specifications'
|
||||
},
|
||||
{
|
||||
patterns: [/\bdesign\s*&\s*layouts?:?\b/i, /\bdesign:\s*/i],
|
||||
title: 'Design & Layouts'
|
||||
},
|
||||
{
|
||||
patterns: [/\bunit types?:?\b/i, /\bunits?:\s*/i],
|
||||
title: 'Unit Types'
|
||||
},
|
||||
{
|
||||
patterns: [/\bamenities?:?\b/i, /\bfacilities?:\s*/i],
|
||||
title: 'Amenities'
|
||||
},
|
||||
{
|
||||
patterns: [/\bconnectivity?:?\b/i, /\blocation:\s*/i],
|
||||
title: 'Connectivity'
|
||||
},
|
||||
{
|
||||
patterns: [/\bpayment plan?:?\b/i, /\bpayment:\s*/i],
|
||||
title: 'Payment Plan'
|
||||
},
|
||||
{
|
||||
patterns: [/\bpricing:\s*/i],
|
||||
title: 'Pricing'
|
||||
},
|
||||
{
|
||||
patterns: [/\boverview?:?\b/i],
|
||||
title: 'Overview'
|
||||
},
|
||||
{
|
||||
patterns: [/\bdeveloper?:?\b/i],
|
||||
title: 'Developer'
|
||||
},
|
||||
]
|
||||
|
||||
// Find all section matches
|
||||
const matches = []
|
||||
|
||||
sectionPatterns.forEach(({ patterns, title, keywords }) => {
|
||||
patterns.forEach(pattern => {
|
||||
const match = pattern.exec(text)
|
||||
if (match) {
|
||||
matches.push({ index: match.index, title, match: match[0], keywords })
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// If no explicit section headers found, don't try keyword matching
|
||||
// as it can cause incorrect matches and text corruption
|
||||
|
||||
// Remove duplicates and sort by index
|
||||
const uniqueMatches = []
|
||||
const seenTitles = new Set()
|
||||
matches.sort((a, b) => a.index - b.index).forEach(match => {
|
||||
if (!seenTitles.has(match.title)) {
|
||||
seenTitles.add(match.title)
|
||||
uniqueMatches.push(match)
|
||||
}
|
||||
})
|
||||
|
||||
if (uniqueMatches.length === 0) {
|
||||
// If still no matches, check if text contains numbered lists or bullet points
|
||||
// and try to extract structured content
|
||||
const lines = text.split(/\n+/).filter(line => line.trim())
|
||||
const hasListFormat = lines.some(line => /^\d+\.|^[-*•]/.test(line.trim()))
|
||||
|
||||
if (hasListFormat) {
|
||||
// Try to group by topic based on content
|
||||
return null // Let it fall through to plain text for now
|
||||
}
|
||||
|
||||
return { intro: text, sections: [] }
|
||||
}
|
||||
|
||||
// Extract intro text (before first section)
|
||||
const introText = uniqueMatches.length > 0
|
||||
? text.substring(0, uniqueMatches[0].index).trim()
|
||||
: text.trim()
|
||||
|
||||
// Extract each section
|
||||
const sections = []
|
||||
uniqueMatches.forEach((match, index) => {
|
||||
// Find the actual end of the matched pattern (including colon if present)
|
||||
let startIndex = match.index + match.match.length
|
||||
|
||||
// Skip any whitespace or colons after the match
|
||||
while (startIndex < text.length && /[\s:]/.test(text[startIndex])) {
|
||||
startIndex++
|
||||
}
|
||||
|
||||
const endIndex = index < uniqueMatches.length - 1
|
||||
? uniqueMatches[index + 1].index
|
||||
: text.length
|
||||
let content = text.substring(startIndex, endIndex).trim()
|
||||
|
||||
// Clean up content - only remove leading colons/dashes if they're at the very start
|
||||
content = content.replace(/^[:\-–—]\s+/, '').trim()
|
||||
|
||||
// Split into lines and format
|
||||
const lines = content.split(/\n+/).filter(line => line.trim())
|
||||
const formattedContent = lines.map(line => {
|
||||
const originalLine = line
|
||||
// Only remove list markers if they're actually at the start
|
||||
line = line.replace(/^\d+\.\s+/, '') // Numbered lists (1. )
|
||||
.replace(/^[-*•]\s+/, '') // Bullet points
|
||||
.replace(/^[:\-–—]\s+/, '') // Colons/dashes
|
||||
// If we removed something, trim, otherwise use original
|
||||
line = line !== originalLine ? line.trim() : line.trim()
|
||||
return line
|
||||
}).filter(line => line.length > 0)
|
||||
|
||||
if (formattedContent.length > 0) {
|
||||
sections.push({
|
||||
title: match.title,
|
||||
content: formattedContent
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return { intro: introText, sections }
|
||||
}
|
||||
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user