docmind-ai

DocMind React

React hooks for interacting with DocMind API.

Installation

npm install docmind-react
# or
yarn add docmind-react
# or
pnpm add docmind-react

Usage

Basic Usage

import { useDocMind } from "docmind-react";
import { useState } from "react";

function ChatComponent() {
  const [query, setQuery] = useState("");
  const [response, setResponse] = useState("");

  // Simple configuration with just the namespace
  const { chat, loading, error } = useDocMind({
    namespace: "your-namespace",
  });

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await chat(query, {
        onChunk: (chunk) => {
          // Handle streaming chunks
          setResponse((prev) => prev + chunk);
        },
        onComplete: (fullText) => {
          // Final response
          console.log("Chat completed:", fullText);
        },
      });
    } catch (err) {
      console.error("Chat error:", err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Ask a question..."
        />
        <button type="submit" disabled={loading}>
          {loading ? "Sending..." : "Send"}
        </button>
      </form>

      {error && <div className="error">{error.message}</div>}

      <div className="response">
        {response || "Ask a question to get started"}
      </div>
    </div>
  );
}

Using with shadcn UI

import { useDocMind } from "docmind-react";
import { useState } from "react";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

function ChatDialog() {
  const [query, setQuery] = useState("");
  const [response, setResponse] = useState("");
  const { chat, loading, error } = useDocMind({
    namespace: "your-namespace",
  });

  const handleChat = async () => {
    if (!query.trim()) return;

    setResponse("");

    await chat(query, {
      onChunk: (chunk) => {
        setResponse((prev) => prev + chunk);
      },
    });
  };

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Ask DocMind</Button>
      </DialogTrigger>
      <DialogContent>
        <Input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Ask a question..."
        />
        <Button onClick={handleChat} disabled={loading}>
          {loading ? "Processing..." : "Send"}
        </Button>

        {response && <div>{response}</div>}
      </DialogContent>
    </Dialog>
  );
}

Direct Client Usage

You can also use the DocMind client directly if you need more control:

import { DocMind } from "docmind-react";

const client = new DocMind({
  baseUrl: "http://localhost:3001",
  namespace: "custom-namespace",
});

// Later in your code
async function sendMessage() {
  const result = await client.chat("What is DocMind?", {
    onChunk: (chunk) => console.log("Received chunk:", chunk),
    onComplete: (text) => console.log("Complete response:", text),
    onError: (error) => console.error("Error:", error),
  });

  console.log("Final text:", result.text);
}

API Reference

useDocMind(config?: DocMindConfig)

React hook for integrating with DocMind API.

Parameters:

• config (optional): Configuration object with the following properties:
  • baseUrl (optional): API base URL. Default: 'http://localhost:3001'
  • namespace (optional): Namespace for document operations. Default: 'docmindsite1'

Returns:

• chat: Function to send chat messages and get responses
• loading: Boolean indicating if a request is in progress
• error: Error object if the last request failed

DocMind

Client class for direct API interactions.

Methods:

• constructor(config?: DocMindConfig): Create a new client
• chat(query: string, options?: ChatStreamOptions): Send a chat message
• setNamespace(namespace: string): Set the namespace

License

MIT