|
1 | 1 | --- |
2 | | -title: Chat UI Component |
3 | | -sidebarTitle: Chat UI Component |
| 2 | +title: Chat Interface |
| 3 | +sidebarTitle: Chat Interface |
4 | 4 | description: Interactive chat interface component for conversational search |
5 | 5 | --- |
6 | 6 |
|
7 | | -This page provides an interactive chat interface component that demonstrates Meilisearch's conversational search capabilities. |
8 | | - |
9 | | -## Interactive Demo |
| 7 | +## Conversational AI Demo |
10 | 8 |
|
11 | 9 | <iframe |
12 | | - src="https://chat-frontend-iframe-fk5ekooet-meili.vercel.app/" |
| 10 | + src="https://chat-frontend-iframe.vercel.app/" |
13 | 11 | title="Embedded content" |
14 | | - className="w-full h-96 rounded-xl" |
| 12 | + className="w-full h-[500px] rounded-xl" |
15 | 13 | sandbox="allow-scripts allow-same-origin allow-forms allow-popups" |
16 | 14 | allow="clipboard-write" |
| 15 | + loading="lazy" |
| 16 | + style={{ minHeight: '500px' }} |
17 | 17 | onLoad="console.log('Iframe loaded successfully')" |
18 | 18 | onError="console.log('Iframe failed to load')" |
19 | 19 | ></iframe> |
20 | 20 |
|
21 | 21 | <div className="mt-4 text-center"> |
22 | | - <p className="text-sm text-gray-600 mb-2">If the chat interface doesn't load above, you can:</p> |
23 | 22 | <a |
24 | | - href="https://chat-frontend-iframe-605rmlkao-meili.vercel.app/" |
| 23 | + href="https://chat-frontend-iframe.vercel.app/" |
25 | 24 | target="_blank" |
26 | 25 | rel="noopener noreferrer" |
27 | | - className="inline-block px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors" |
| 26 | + className="inline-block px-4 py-2 text-sm bg-black-500 text-white rounded-lg hover:bg-blue-600 transition-colors" |
28 | 27 | > |
29 | | - Open Chat Interface in New Tab |
| 28 | + Go directly to chatbot |
30 | 29 | </a> |
31 | 30 | </div> |
32 | 31 |
|
33 | | -## Features |
34 | | - |
35 | | -This interactive component showcases: |
36 | | - |
37 | | -- Real-time conversational search |
38 | | -- Streaming responses |
39 | | -- Source citations |
40 | | -- Context-aware follow-up questions |
41 | | -- Multiple LLM provider support |
42 | | - |
43 | | -## Integration |
44 | | - |
45 | | -The chat UI component can be integrated into your application using the provided iframe or by implementing the underlying API calls directly. |
46 | | - |
47 | | -<Note> |
48 | | -This is a demonstration component. For production use, implement proper authentication and security measures. |
49 | | -</Note> |
0 commit comments