🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
Sign In

dwk-sse-chat

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dwk-sse-chat

一个基于Vue3的聊天组件库，支持在Vue项目中导入使用，也支持在普通HTML页面中通过脚本标签直接引入使用。

latest
npmnpm
Version
1.5.0
Version published
Weekly downloads
23
187.5%
Maintainers
1
Weekly downloads
 
Created
Source

DWK SSE Chat

一个基于Vue3的聊天组件库，支持在Vue项目中导入使用，也支持在普通HTML页面中通过脚本标签直接引入使用。

特性

  • 支持多种使用方式（Vue组件、JS库）
  • 悬浮球式聊天窗口
  • 支持拖拽和边缘吸附
  • 支持全屏/小窗模式切换
  • 美观的UI和流畅的动画

安装

在Vue项目中使用

# npm
npm install dwk-sse-chat

# yarn
yarn add dwk-sse-chat

# pnpm
pnpm add dwk-sse-chat

在HTML页面中直接使用

<script src="https://你的域名/chat.js"></script>

使用方法

方法1: 直接在Vue项目中引入

<template>
  <div class="chat-wrapper">
    <ChatWindows />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { ChatWindows } from 'dwk-sse-chat';

onMounted(() => {
  // 初始化配置
  window.dispatchEvent(new CustomEvent('chatConfigUpdate', { 
    detail: {
      robotname: "机器人名称",
      dwk_token: "你的token",
      title: "聊天窗口标题",
      baseUrl: "API基础URL",
      isFullScreen: false // 是否全屏显示
    }
  }));
})
</script>

<style>
/* 重要：确保包装容器有正确的定位和层级 */
.chat-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
</style>

方法2: 使用浏览器直接引入方式

<!DOCTYPE html>
<html>
<head>
  <title>DWK Chat 示例</title>
</head>
<body>
  <h1>聊天组件示例</h1>
  
  <!-- 引入聊天组件 -->
  <script src="path/to/chat.js"></script>
  <script>
    // 初始化聊天组件
    var chat = new Chat({
      robotname: "机器人名称",
      dwk_token: "你的token",
      title: "聊天窗口标题",
      baseUrl: "API基础URL"
    });
    
    // 显示聊天窗口
    chat.show();
  </script>
</body>
</html>

配置选项

选项类型必填默认值说明
robotnamestring否'AI助手'机器人名称
dwk_tokenstring是-认证token
titlestring否'DWK SSE Chat'聊天窗口标题
baseUrlstring是-API基础URL
isFullScreenboolean否false是否以全屏模式显示

API方法

show()

显示聊天窗口。

chat.show();

hide()

隐藏聊天窗口。

chat.hide();

sendMessage(message)

发送一条消息。

chat.sendMessage('你好，AI助手！');

updateConfig(config)

更新配置。

chat.updateConfig({
  title: '新标题',
  isFullScreen: true
});

常见问题

悬浮球不显示或位置不正确

确保包装组件具有正确的样式：

.chat-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

并且保证在初始化后调用配置更新事件：

window.dispatchEvent(new CustomEvent('chatConfigUpdate', { 
  detail: { /* 你的配置 */ }
}));

聊天窗口平铺在应用中

这通常是因为包装容器缺少正确的CSS定位。确保包装组件设置了position: fixed且覆盖整个视口。

如何完全自定义样式？

可以通过全局CSS覆盖组件样式：

/* 自定义悬浮球 */
.custom-floating-ball {
  background-color: #ff5500 !important; /* 自定义颜色 */
}

/* 自定义聊天窗口 */
#dwk-chat-app.dwk-chat-app {
  border-radius: 0 !important; /* 移除圆角 */
}

开发者指南

构建

npm run build

调试

npm run dev

FAQs

Package last updated on 09 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Introducing Repository Access Permissions and Custom Roles

Product

Introducing Repository Access Permissions and Custom Roles

Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.

By Joe Werle  -  Jun 19, 2026