ChatDOC Document Viewer

If you want to view the document in the browser, you can use the @chatdocai/chatdoc-sdk npm package.

The @chatdocai/chatdoc-sdk npm package is used to display documents(.pdf, .epub, .txt, .md, .html) and interact with them by selecting text and asking questions. Here are the steps to get started:

Install @chatdocai/chatdoc-sdk

pnpm install @chatdocai/chatdoc-sdk
# npm install @chatdocai/chatdoc-sdk
# yarn add @chatdocai/chatdoc-sdk

Init chatdoc-sdk

Initialize the chatdoc-sdk by importing the initSDK function from @chatdocai/chatdoc-sdk and using it to create an instance of the DOCViewerSDK.

Please provide the DOM element or CSS selector string where you want to mount the SDK. You can find detailed parameter information in the Config section.

Usage Example:
```
import { initSDK } from '@chatdocai/chatdoc-sdk';

const sdk = initSDK({
  el: '#doc-viewer',
})
```

Open document

Use the open method of @chatdocai/chatdoc-sdk to open the document.

Usage Example:

// Please replace the URL with your own file URL.
sdk.open({url: 'https://example.com/pdf-file.pdf', viewerType: 'pdf'})

// If you want to view other documents (such as .epub, .html, .txt, .md), you need to set the viewerType to `html`.
sdk.open({url: 'https://example.com/document.txt', viewerType: 'html'})

Add event listener

Add event listeners to handle specific events. For example, you can listen to the CHAT_ICON_CLICKED event to get the selected text from the document when the chat icon is clicked.

The @chatdocai/chatdoc-sdk package also exports the EVENT_TYPES object, which types the event name.

Usage Example:

import { EVENT_TYPES } from '@chatdocai/chatdoc-sdk';

// this event is dispatched after you clicked the chat icon in document
sdk.on(EVENT_TYPES.CHAT_ICON_CLICKED, (data) => {
  // if your viewType is `pdf`, the data is `PDFMaterialData`
  // if your viewType is `html`, the data is `HTMLMaterialData`
  console.log(data)
});

DOCViewerSDK

The DOCViewerSDK class provides a document viewer SDK with various methods and properties for interacting with the document viewer. Here are some key details about the class:

Config

The configuration parameters for the SDK.

Properties:

el: string | HTMLElement - the DOM element or CSS selector string used for mounting and rendering the SDK.
fileUrl: string (optional) Deprecated - The URL of the document. (This field is no longer recommended for use in new code. Consider using the open method instead.)

getToken: () => Promise<string> (optional) - An optional function that returns a Promise resolving to a string representing the JWT token.The token is encoded using an API key, and the payload is {"upload_id": "xxx"}.

import jwt from 'jsonwebtoken';
// token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cGxvYWRfaWQiOiI2YjNmYzdlOS1kYzE3LTQwYjYtODI4Ny04MDM5N2JhMWU5MmEifQ.sXUbg6tGtF6KqFtCGALTcm7eG6H23dhrKW1wUAAAyus'
const token = jwt.sign({ upload_id: '6b3fc7e9-dc17-40b6-8287-80397ba1e92a' }, 'ak-ifypHN4we-v07xhp0pDKRG-znEb-5YQeFuhXgjt4byM', { noTimestamp: true} );

Usage Example:


// node server
import jwt from 'jsonwebtoken';
async getDocumentToken(ctx) {
  const { id: uploadId } = ctx.params
  const token = jwt.sign({ upload_id: uploadId }, 'API_KEY', { noTimestamp: true} );
  ctx.body = {
    status: 'ok',
    data: {token}
  }
}

// client
const getToken = async () => {
  const { token } = await getDocumentToken('uploadId');
  return token;
};
const config: Config = {
  el: '#pdf-viewer',
  getToken
};

ViewType

This type represents the available view types for a document. It is a union type that can have one of two values: pdf or html. This type is utilized to specify the desired view type when rendering or displaying a document.

pdf: Set the view type to 'pdf' when you want to view files with the .pdf extension.
html: Set the view type to 'html' when you want to view files with .txt, .md, .epub, or .html extensions.

FileOptions

The FileOptions type represents the options for opening a document.

Properties:

url: string - The URL of the document.
viewerType: ViewType - The desired view type for rendering the document, which can be either pdf or html.

Usage Example:

const options = {
  url: 'https://example.com/document.pdf',
  viewerType: 'pdf',
};

Source

The Source type represents a source in the SDK, which is the parameter of the drawSources method.

Properties:

pageNumber: number - The page number of the source.
rects: number[][] - An array of rectangles represented by four numbers [left, top, right, bottom] indicating their positions within the source coordinates.

Usage Example:

const source: Source = {
  pageNumber: 1,
  rects: [[10, 10, 50, 50], [60, 60, 100, 100]],
};

HTMLMaterialData

The HTMLMaterialData type contains the material content and the document selection obtained from the callback handler of the EVENT_TYPES.CHAT_ICON_CLICKED event when the FileOptions.viewType is set to html.

Properties:

material: string - The selected text or HTML content.
indexes: number[] - An array of indexes representing the selected text node index in the document.
focusNode: string - A XPath string of the selection's focusNode in the document.
focusOffset: number - The number of characters that the selection's focus is offset within the focusNode.
anchorNode: string - A XPath string of the selection's anchorNode in the document.
anchorOffset: number - The number of characters that the selection's anchor is offset within anchorNode.

Usage Example:

const material: HTMLMaterialData = {
  material: 'content',
  indexes: [1, 2, 3],
  focusNode: 'div/div[4]/text()',
  focusOffset: 2,
  anchorNode: 'div/div[2]/text()',
  anchorOffset: 3,
};

PDFMaterialData

The PDFMaterialData type contains the selected text and the outlines in the document obtained from the callback handler of the EVENT_TYPES.CHAT_ICON_CLICKED event when the FileOptions.viewType is set to pdf.

Properties:

material: string - The selected text.
rects: Rect[] (optional) - An array of rectangles representing the outlines.

Usage Example:

const material: PDFMaterialData = {
  material: 'content',
  rects: [
    {
      pageNumber: 1,
      outline: [10, 10, 50, 50],
    },
    {
      pageNumber: 2,
      outline: [60, 60, 100, 100],
    },
  ],
};

Rect

The Rect type represents a rectangle in the document, and it is a field in the PDFMaterialData type.

Properties:

pageNumber: number - The page number of the rectangle.
outline: number[] - The outline array represents the rectangle's outline coordinates as four values: left, top, right, and bottom.

Usage Example:

const rect: Rect = {
  pageNumber: 1,
  outline: [10, 10, 50, 50],
};

Methods

setFileUrl(fileUrl: string): any `Deprecated`

This method is used to set the file URL for opening a document.

fileUrl: string - The URL of the file to load.

Deprecated Note: It is recommended to use the open method instead for opening a document. The setFileUrl method is deprecated.

drawSources(sources: Source[]): Promise

Draws source rectangles on the document viewer.

sources: Source[] - The source rectangles to draw.

clearSources(): void

Clears source annotations.

destroy(): void

Destroys the document viewer SDK instance.

on(name: string, handler: Func): void

Adds an event listener for the specified event.

name: string - The name of the event, you can get the event name from EVENT_TYPES.
handler: Func - The event handler function.

off(name: string, handler: Func): void

Removes an event listener for the specified event.

name: string - The name of the event.
handler: Func - The event handler function.

getCurrentPageNumber(): any

Gets the current page number.

Returns: any - The current page number.

open(options: FileOptions): any

This method is used to open a document using the provided options.

options: FileOptions - An object that specifies the options for opening the document.

EVENT_TYPES

PAGE_RENDERED - After each page is rendered, this event is dispatched, and you can obtain the current page number from the callback handler.
CHAT_ICON_CLICKED - After you clicked the chat icon in document, and you can obtain the HTMLMaterialData or PDFMaterialData from the callback handler.

DOCViewerSDK

Config

ViewType

FileOptions

Source

HTMLMaterialData

PDFMaterialData

Rect

Methods

setFileUrl(fileUrl: string): any Deprecated

drawSources(sources: Source[]): Promise

clearSources(): void

destroy(): void

on(name: string, handler: Func): void

off(name: string, handler: Func): void

getCurrentPageNumber(): any

open(options: FileOptions): any

EVENT_TYPES

setFileUrl(fileUrl: string): any `Deprecated`