mirror of
https://github.com/microsoft/agent-framework.git
synced 2026-06-16 21:04:09 +08:00
Eric Zhu
0c862e97a6
* feat: Add ChatKit integration with a new frontend application - Created a new frontend application using React and Vite for the ChatKit integration. - Added essential files including package.json, vite.config.ts, and Tailwind CSS configuration. - Implemented core components: App, Home, ChatKitPanel, ThemeToggle, and hooks for color scheme management. - Established SQLite-based store implementation for ChatKit data persistence in store.py. - Integrated theme toggling functionality for light and dark modes. - Set up ESLint and TypeScript configurations for better development experience. * git ignore * fix mypy * add mising file * minimal frontend for chatkit sample * update ignore files * version * set python version lowerbound on chatkit * update project settings for chatkit * update setup * update setup * update setup * update setup * weather widget * add select city widget sample * remove widget helper * update chatkit to include file attachments and cover more thread item types * update readme with mermaid diagram * update diagram * update instructions * update chatkit dependency * fix converter imports * move to demos/ * move to demos/ -- rename references * support multiple session instead of using global variable in sample * support chunk streaming * fix tests * Update python/samples/demos/chatkit-integration/store.py Co-authored-by: Evan Mattson <35585003+moonbox3@users.noreply.github.com> * use local host --------- Co-authored-by: Evan Mattson <35585003+moonbox3@users.noreply.github.com>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { ChatKit, useChatKit } from "@openai/chatkit-react";
|
|
|
|
const CHATKIT_API_URL = "/chatkit";
|
|
const CHATKIT_API_DOMAIN_KEY =
|
|
import.meta.env.VITE_CHATKIT_API_DOMAIN_KEY ?? "domain_pk_localhost_dev";
|
|
|
|
export default function App() {
|
|
const chatkit = useChatKit({
|
|
api: {
|
|
url: CHATKIT_API_URL,
|
|
domainKey: CHATKIT_API_DOMAIN_KEY,
|
|
uploadStrategy: { type: "two_phase" },
|
|
},
|
|
startScreen: {
|
|
greeting: "Hello! I'm your weather and image analysis assistant. Ask me about the weather in any location or upload images for me to analyze.",
|
|
prompts: [
|
|
{ label: "Weather in New York", prompt: "What's the weather in New York?" },
|
|
{ label: "Select City to Get Weather", prompt: "Show me the city selector for weather" },
|
|
{ label: "Current Time", prompt: "What time is it?" },
|
|
{ label: "Analyze an Image", prompt: "I'll upload an image for you to analyze" },
|
|
],
|
|
},
|
|
composer: {
|
|
placeholder: "Ask about weather or upload an image...",
|
|
attachments: {
|
|
enabled: true,
|
|
accept: { "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"] },
|
|
},
|
|
},
|
|
});
|
|
|
|
return <ChatKit control={chatkit.control} style={{ height: "100%" }} />;
|
|
}
|