Spaces:
Running
Running
File size: 2,295 Bytes
5a2eb52 cc1ccff 41c0d09 cc1ccff 424a8d9 a9b2457 cc1ccff f90bfec 2f921c8 f90bfec cc1ccff f90bfec cc1ccff 4c61f8e cc1ccff f90bfec 2f921c8 f90bfec 2f921c8 a9b2457 2f921c8 41c0d09 cc1ccff 41c0d09 f90bfec 424a8d9 f90bfec cc1ccff f90bfec 424a8d9 f90bfec | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import { useState } from "react";
import { useChatCompletion } from "../hooks/useChatCompletion";
import { useChatSettings } from "../hooks/useChatSettings";
import { useUISettings } from "../hooks/useUISettings";
import ChatSettings from "./ChatSettings";
import LoadingIndicator from "./LoadingIndicator";
import MessageInput from "./MessageInput";
import MessagePair from "./MessagePair";
import OAuthLogin from "./OAuthLogin";
import TypingMessage from "./TypingMessage";
import UISettings from "./UISettings";
export default function ChatInterface() {
const [hfClient, setHFClient] = useState(null);
const [chatHistory, setChatHistory] = useState([]);
const [chatSettings, setChatSettings] = useChatSettings();
const [uiSettings, setUISettings] = useUISettings();
const { sendMessage, isLoading, typingMessage, error } = useChatCompletion(
hfClient,
chatSettings,
uiSettings,
(newPair) => setChatHistory([newPair, ...chatHistory])
);
const handleMessageSend = async (message) => {
sendMessage(message);
};
const handleHFClientReady = (client) => {
setHFClient(client);
};
return (
<div
style={{
padding: "20px",
maxWidth: "600px",
margin: "auto",
display: "flex",
flexDirection: "column",
gap: "24px",
}}
>
{/* Token input */}
<div>
<OAuthLogin onHFClientReady={handleHFClientReady} />
</div>
{/* Chat settings */}
<div>
<ChatSettings settings={chatSettings} setSettings={setChatSettings} />
</div>
{/* UI behavior settings */}
<div>
<UISettings settings={uiSettings} setSettings={setUISettings} />
</div>
{/* Input area */}
<div>
<MessageInput onSend={handleMessageSend} />
</div>
{/* Chat history */}
<div>
{isLoading && <LoadingIndicator type={uiSettings.loadingStyle} />}
{typingMessage && <TypingMessage text={typingMessage} />}
{error && <div style={{ color: "red" }}>{error.message}</div>}
{chatHistory.map((pair, index) => (
<MessagePair
key={index}
userMessage={pair.user}
assistantMessage={pair.assistant}
/>
))}
</div>
</div>
);
}
|