jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Fixed more UI issues

Browse Source
This commit is contained in:
James Ketr 2025-05-31 17:37:04 -07:00
parent 40ab58fffe
commit e1c1bcf097
1 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/pages/CandidateChatPage.tsx
View File

@ -42,6 +42,7 @@ import { CandidateInfo } from 'components/CandidateInfo';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useSelectedCandidate } from 'hooks/GlobalContext'; import { useSelectedCandidate } from 'hooks/GlobalContext';
import PropagateLoader from 'react-spinners/PropagateLoader'; import PropagateLoader from 'react-spinners/PropagateLoader';
import { BackstoryTextField, BackstoryTextFieldRef } from 'components/BackstoryTextField';
const DRAWER_WIDTH = 300; const DRAWER_WIDTH = 300;
const FAB_WIDTH = 48; const FAB_WIDTH = 48;
@ -61,6 +62,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
const isMdUp = useMediaQuery(theme.breakpoints.up('md')); const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
const [processingMessage, setProcessingMessage] = useState<ChatMessage | null>(null); const [processingMessage, setProcessingMessage] = useState<ChatMessage | null>(null);
const [streamingMessage, setStreamingMessage] = useState<ChatMessage | null>(null); const [streamingMessage, setStreamingMessage] = useState<ChatMessage | null>(null);
const backstoryTextRef = useRef<BackstoryTextFieldRef>(null);
const { const {
setSnack, setSnack,
@ -70,7 +72,6 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
const [sessions, setSessions] = useState<CandidateSessionsResponse | null>(null); const [sessions, setSessions] = useState<CandidateSessionsResponse | null>(null);
const [chatSession, setChatSession] = useState<ChatSession | null>(null); const [chatSession, setChatSession] = useState<ChatSession | null>(null);
const [messages, setMessages] = useState<ChatMessage[]>([]); const [messages, setMessages] = useState<ChatMessage[]>([]);
const [newMessage, setNewMessage] = useState<string>('');
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [streaming, setStreaming] = useState<boolean>(false); const [streaming, setStreaming] = useState<boolean>(false);
const messagesEndRef = useRef(null); const messagesEndRef = useRef(null);
@ -254,11 +255,10 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
}; };
// Send message // Send message
const sendMessage = async () => { const sendMessage = async (message: string) => {
if (!newMessage.trim() || !chatSession?.id || streaming) return; if (!message.trim() || !chatSession?.id || streaming) return;
const messageContent = newMessage; const messageContent = message;
setNewMessage('');
setStreaming(true); setStreaming(true);
const chatMessage: ChatMessageUser = { const chatMessage: ChatMessageUser = {
@ -446,7 +446,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
cursor: 'pointer', cursor: 'pointer',
backgroundColor: 'transparent', backgroundColor: 'transparent',
'&:hover': { '&:hover': {
backgroundColor: chatSession?.id === session.id ? 'primary.light' : 'action.hover' backgroundColor: 'action.hover'
} }
}} }}
secondaryAction={ secondaryAction={
@ -668,26 +668,16 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
{/* Fixed Message Input */} {/* Fixed Message Input */}
<Box sx={{ p: 2, display: 'flex', gap: 1, flexShrink: 0 }}> <Box sx={{ p: 2, display: 'flex', gap: 1, flexShrink: 0 }}>
<TextField <BackstoryTextField
fullWidth
variant="outlined"
placeholder="Type your message about the candidate..." placeholder="Type your message about the candidate..."
value={newMessage} ref={backstoryTextRef}
onChange={(e) => setNewMessage(e.target.value)} onEnter={sendMessage}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
}}
disabled={streaming} disabled={streaming}
multiline
maxRows={4}
/> />
<Button <Button
variant="contained" variant="contained"
onClick={sendMessage} onClick={() => { sendMessage((backstoryTextRef.current && backstoryTextRef.current.getAndResetValue()) || ""); }}
disabled={!newMessage.trim() || streaming} disabled={streaming}
sx={{ minWidth: 'auto', px: 2 }} sx={{ minWidth: 'auto', px: 2 }}
> >
▶ ▶