Fixed more UI issues

This commit is contained in:
James Ketr 2025-05-31 17:37:04 -07:00
parent 40ab58fffe
commit e1c1bcf097

View File

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