DocTalkie Documentation

Welcome to the official documentation for DocTalkie. Here you will find everything you need to embed the chat widget or build your own chat interface using our tools.

DocTalkie allows you to create AI assistants based on your documents. This documentation covers how to integrate the chat experience into your application.

Explore the sections in the sidebar navigation: 'Usage: Chat Widget' for the quickest integration, or 'Usage: Hook' for building a custom interface.

Installation

To integrate DocTalkie into your React project, install the package using your preferred package manager:

Using npm:

npm install doctalkie-react

bash

Using yarn:

yarn add doctalkie-react

bash

Using pnpm:

pnpm add doctalkie-react

bash

Once installed, you can import the necessary components or hooks into your application as shown in the usage sections.

Usage: Chat Widget (Minimal)

The easiest way to add a DocTalkie chat to your application is by using the built-in DocTalkieChat component. Below is the minimal setup required.

Minimal Example:

1import DocTalkieChat from '@/components/doc-talkie-chat/doc-talkie-chat';
2
3export default function MyApp() {
4  const botApiUrl = "YOUR_BOT_API_URL"; // Replace with your Bot's API URL
5  const botApiKey = "YOUR_BOT_API_KEY";   // Replace with your Bot's API Key
6
7  return (
8    <div>
9      <h1>My Application</h1>
10      {/* Minimal chat widget setup */}
11      <DocTalkieChat 
12        apiURL={botApiUrl} 
13        apiKey={botApiKey}
14      />
15    </div>
16  );
17}

typescript

Replace YOUR_ASSISTANT_ID andYOUR_BOT_API_KEY with values from your DocTalkie dashboard.

Widget Configuration & Customization

The DocTalkieChat component accepts required and optional props for customization:

Required Props

Prop	Description	Type
apiURL	The endpoint for the chat API, typically `/api/chat/[assistantId]`.	string
apiKey	The specific API key for your bot, obtained from the dashboard.	string

Optional Props

Prop	Description	Type	Default
theme	Visual theme ("light", "dark", or "doctalkie").	string	"doctalkie"
accentColor	Background color for user messages (e.g., "#FF5733"). Overrides theme color for user messages.	string	Theme default
position	Widget position ("bottom-right" or "bottom-left").	string	"bottom-right"
welcomeMessage	Custom initial message from the assistant.	string	"Hi there! How can I help you today?"
className	Additional CSS classes for the root widget container.	string	None

Example with Customizations

Demonstrating various optional props.

1import DocTalkieChat from '@/components/doc-talkie-chat/doc-talkie-chat';
2// import './my-custom-styles.css'; // If using className
3
4export default function AnotherPage() {
5  const botApiUrl = "YOUR_BOT_API_URL";
6  const botApiKey = "YOUR_BOT_API_KEY";
7
8  return (
9    <div className="app">
10       <header><h1>Another Page with Customized Chat</h1></header>
11      {/* --- Customized DocTalkie Chat Widget --- */}
12      <DocTalkieChat 
13        apiURL={botApiUrl} 
14        apiKey={botApiKey}
15        // Customizations:
16        theme="light" 
17        position="bottom-left"
18        accentColor="#8B5CF6" // Example: Violet color for user messages
19        welcomeMessage="Ask me anything about the advanced topics!"
20        className="my-custom-widget-styles" // Optional custom class for further styling
21      />
22       {/* --------------------------------------- */}
23    </div>
24  )
25}

typescript

Usage: Hook (Advanced)

For complete control over the chat UI, you can use the useDocTalkie hook. It handles the API communication and state management, allowing you to build a custom interface.

Example:

1import { useState, useEffect } from 'react';
2import { useDocTalkie, type Message } from '@/components/doc-talkie-chat/use-doc-talkie';
3
4function MyCustomChatInterface() {
5  const botApiUrl = "YOUR_BOT_API_URL"; // Replace with your Bot's API URL
6  const botApiKey = "YOUR_BOT_API_KEY";   // Replace with your Bot's API Key
7  const [input, setInput] = useState('');
8
9  const { messages, isLoading, error, sendMessage } = useDocTalkie({
10    apiURL: botApiUrl,
11    apiKey: botApiKey,
12    // Optional: Provide initial messages if needed
13    // initialMessages: [{ id: 'custom-start', content: 'Start here!', sender: 'system' }]
14  });
15
16  const handleSend = () => {
17    if (input.trim()) {
18      sendMessage(input);
19      setInput('');
20    }
21  };
22
23  return (
24    <div className="my-chat-container">
25      <div className="messages-area">
26        {error && <div className="error-message">{error}</div>}
27        {messages.map((msg: Message) => (
28          <div key={msg.id} className={`message ${msg.sender}`}>
29            {/* Render your message bubble here using msg.content */}
30            {/* You might want to use react-markdown here too! */}
31            <p>{msg.content}</p>
32          </div>
33        ))}
34        {isLoading && <div className="loading-indicator">Assistant is typing...</div>}
35      </div>
36      <div className="input-area">
37        <input 
38          type="text" 
39          value={input} 
40          onChange={(e) => setInput(e.target.value)} 
41          placeholder="Ask something..."
42          disabled={isLoading}
43        />
44        <button onClick={handleSend} disabled={isLoading || !input.trim()}>Send</button>
45      </div>
46    </div>
47  );
48}

typescript

The hook returns an object containing:

messages: An array of message objects.
isLoading: Boolean indicating if a response is pending.
error: String containing an error message, if any.
sendMessage: Function to send a new user message (takes the message string as input).

Remember to replace the placeholder IDs and keys, and style the elements (.my-chat-container, .message, etc.) according to your design.

Examples

Basic Widget Example

Embedding the default chat widget.

1import DocTalkieChat from '@/components/doc-talkie-chat/doc-talkie-chat';
2
3export default function MyPage() {
4  const botApiUrl = "YOUR_BOT_API_URL";
5  const botApiKey = "YOUR_BOT_API_KEY";
6
7  return (
8    <div className="app">
9      <header><h1>My Documentation Site</h1></header>
10      <main>
11        <h2>Getting Started</h2>
12        <p>Welcome to our documentation...</p>
13      </main>
14      {/* --- DocTalkie Chat Widget --- */}
15      <DocTalkieChat 
16        apiURL={botApiUrl}
17        apiKey={botApiKey}
18      />
19      {/* ----------------------------- */}
20    </div>
21  )
22}

typescript

Customized Widget Example

Customizing appearance and position.

1import DocTalkieChat from '@/components/doc-talkie-chat/doc-talkie-chat';
2// import './my-custom-styles.css'; // If using className
3
4export default function AnotherPage() {
5  const botApiUrl = "YOUR_BOT_API_URL";
6  const botApiKey = "YOUR_BOT_API_KEY";
7
8  return (
9    <div className="app">
10       <header><h1>Another Page</h1></header>
11      <main>
12        <h2>Advanced Topics</h2>
13        <p>More details here...</p>
14      </main>
15      {/* --- Customized DocTalkie Chat Widget --- */}
16      <DocTalkieChat 
17        apiURL={botApiUrl}
18        apiKey={botApiKey}
19        theme="light" 
20        position="bottom-left"
21        accentColor="#8B5CF6" // Example: Violet color for user messages
22        welcomeMessage="Ask me anything about the advanced topics!"
23        // className="my-custom-widget-styles" // Optional custom class
24      />
25       {/* --------------------------------------- */}
26    </div>
27  )
28}

typescript

Basic Hook Example (for custom UI)

Minimal example using the hook.

1import { useDocTalkie } from '@/components/doc-talkie-chat/use-doc-talkie';
2
3function MyChatComponent() {
4  const { messages, sendMessage, isLoading } = useDocTalkie({
5    apiURL: "YOUR_BOT_API_URL",
6    apiKey: "YOUR_BOT_API_KEY",
7  });
8
9  // Your UI rendering logic using messages, sendMessage, isLoading...
10  return (
11    <div>
12      {/* Your custom chat rendering */}
13    </div>
14  );
15}

typescript