open-index/open-npm huggingface dataset:
npm package: @langchat/web-sdk
Description: A standalone chat widget that can be integrated into any website.
Latest version: 0.5.0

# LangChat Web SDK

A standalone chat widget that can be integrated into any website.

## Usage

### In Vue project

```shell
npm i @langchat/web-sdk
```

```vue
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import '@langchat/web-sdk/style.css'
import LangChatBot from '@langchat/web-sdk'

onMounted(() => {
  new LangChatBot({
    apiUrl: 'https://your-api-url/chat',
    token: 'your-api-token',
    layout: 'widget', // or 'fullpage'
    position: 'bottom-right', // or 'bottom-left'
    theme: {
      primary: '#3B82F6',
      secondary: '#1D4ED8'
    },
    container: '#chat-container' // 可选：指定挂载容器
  });
})
</script>

<template>
  <!-- 如果需要指定容器 -->
  <div id="chat-container" style="position: relative; height: 600px;"></div>
</template>
```

## Preview

1. 小组件模式，`layout='widget'`

![](imgs/MIK-iHSldL.png)

1. 窗口模式/iframe模式，`layout='fullpage'`

![](imgs/MIK-Muf5PB.png)


### In Html project

1. Include the required files in your HTML:

```html
<link rel="stylesheet" href="https://path-to-your-cdn/style.css">
<script src="https://path-to-your-cdn/index.js"></script>
```

2. Initialize the chat widget:

```html
<!-- 可选：指定挂载容器 -->
<div id="chat-container" style="position: relative; height: 600px;"></div>

<script>
  new LangChatBot({
    apiUrl: 'https://your-api-url/chat',
    token: 'your-api-token',
    layout: 'widget', // or 'fullpage'
    position: 'bottom-right', // or 'bottom-left'
    theme: {
      primary: '#3B82F6',
      secondary: '#1D4ED8'
    },
    container: '#chat-container' // 可选：指定挂载容器
  });
</script>
```

## Configuration Options

- `apiUrl` (optional): The URL for your chat API endpoint
- `token` (optional): Authentication token for API requests
- `title` (optional): Chat window title
- `layout`: 'widget' (floating chat) or 'fullpage' (centered chat page)
- `position`: 'bottom-right' or 'bottom-left' (only for widget layout)
- `container` (optional): Specify a mount container for the chat widget. Can be a CSS selector string or HTMLElement
- `theme`: Customize colors
  - `primary`: Primary color for buttons and accents
  - `secondary`: Secondary color for hover states

## Container Requirements

When using a custom container:

### For Widget Layout
```css
#chat-container {
  position: relative;
  min-height: 40rem; /* 建议最小高度 */
  min-width: 24rem;  /* 建议最小宽度 */
}
```

### For Fullpage Layout
```css
#chat-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
}
```
npm package: @langchat/widget
Description: A standalone chat widget that can be integrated into any website.
Latest version: 0.6.4

# LangChat Web SDK

A standalone chat widget that can be integrated into any website.

## Usage

### In Vue project

```shell
npm i @langchat/web-sdk
```

```vue
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import '@langchat/web-sdk/style.css'
import LangChatBot from '@langchat/web-sdk'

onMounted(() => {
  new LangChatBot({
    apiUrl: 'https://your-api-url/chat',
    token: 'your-api-token',
    layout: 'widget', // or 'fullpage'
    position: 'bottom-right', // or 'bottom-left'
    theme: {
      primary: '#3B82F6',
      secondary: '#1D4ED8'
    },
    container: '#chat-container' // 可选：指定挂载容器
  });
})
</script>

<template>
  <!-- 如果需要指定容器 -->
  <div id="chat-container" style="position: relative; height: 600px;"></div>
</template>
```

## Preview

1. 小组件模式，`layout='widget'`

![](imgs/MIK-iHSldL.png)

1. 窗口模式/iframe模式，`layout='fullpage'`

![](imgs/MIK-Muf5PB.png)


### In Html project

1. Include the required files in your HTML:

```html
<link rel="stylesheet" href="https://path-to-your-cdn/style.css">
<script src="https://path-to-your-cdn/index.js"></script>
```

2. Initialize the chat widget:

```html
<!-- 可选：指定挂载容器 -->
<div id="chat-container" style="position: relative; height: 600px;"></div>

<script>
  new LangChatBot({
    apiUrl: 'https://your-api-url/chat',
    token: 'your-api-token',
    layout: 'widget', // or 'fullpage'
    position: 'bottom-right', // or 'bottom-left'
    theme: {
      primary: '#3B82F6',
      secondary: '#1D4ED8'
    },
    container: '#chat-container' // 可选：指定挂载容器
  });
</script>
```

## Configuration Options

- `apiUrl` (optional): The URL for your chat API endpoint
- `token` (optional): Authentication token for API requests
- `title` (optional): Chat window title
- `layout`: 'widget' (floating chat) or 'fullpage' (centered chat page)
- `position`: 'bottom-right' or 'bottom-left' (only for widget layout)
- `container` (optional): Specify a mount container for the chat widget. Can be a CSS selector string or HTMLElement
- `theme`: Customize colors
  - `primary`: Primary color for buttons and accents
  - `secondary`: Secondary color for hover states

## Container Requirements

When using a custom container:

### For Widget Layout
```css
#chat-container {
  position: relative;
  min-height: 40rem; /* 建议最小高度 */
  min-width: 24rem;  /* 建议最小宽度 */
}
```

### For Fullpage Layout
```css
#chat-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
}
```