Giới thiệu

Bài viết này giới thiệu Trình Biên Tập Luồng Chatbot OSS, cho phép bạn thiết kế luồng hội thoại chatbot thông qua các thao tác GUI trong một trình biên tập. Tính năng chính là bạn có thể tạo các nút thông qua GUI và xuất luồng dưới dạng JSON.

• GitHub: enumura1/chatbot-flow-editor
• npm: @enumura/chatbot-flow-editor
• Tài liệu: Tài liệu hướng dẫn

Trình Biên Tập Luồng Chatbot là gì?

Trình Biên Tập Luồng Chatbot là một công cụ mã nguồn mở cho phép bạn thiết kế luồng hội thoại chatbot thông qua GUI. Bạn có thể tạo ra các nút để xây dựng luồng hội thoại và xuất chúng trực tiếp dưới định dạng JSON.

Tính năng nổi bật:

• Trình biên tập trực quan
• Xem trước trực tiếp trong trình biên tập (kiểm tra chat)
• Xuất JSON ở định dạng sạch (không có thông tin meta không cần thiết)
• Tích hợp với các ứng dụng web và ứng dụng chatbot

Giao diện của trình biên tập trông như hình dưới đây.

Phương thức cài đặt

Bạn có thể khởi động trình biên tập từ npm bằng lệnh sau:

npx @enumura/chatbot-flow-editor

Nền tảng và các vấn đề

Tôi đã gặp phải một số vấn đề với các công cụ phát triển chatbot hiện có:

• Chi phí sử dụng dịch vụ đám mây cao
• Tích hợp phức tạp với các dịch vụ khác có thể yêu cầu
• Giao diện biên tập trở nên khó nhìn khi số lượng nút tăng lên
• Sự khác biệt chứa thông tin meta không cần thiết như tọa độ, làm cho luồng chat khó quản lý trên GitHub
• Không thể thử nghiệm chat trên một màn hình

Tôi nghĩ rằng "các trường hợp mà luồng tĩnh có thể được xác định trong JSON là đủ" và quyết định tạo một OSS đơn giản cho mục đích đó.

Ví dụ, JSON được xuất từ một số công cụ luồng có thể chứa các thông tin meta như sau:

"meta": {
  "fugaPosition": { "x": 10, "y": 20 },
  "piyoData": {
    "fuga1": { "pos": { "x": 100, "y": 50 } }
  },
  "hogeStatus": "ACTIVE",
  ...
}

Khi thông tin tọa độ và trạng thái được bao gồm như vậy, sự khác biệt xảy ra chỉ bằng cách di chuyển các nút, tạo ra tiếng ồn khi quản lý trên GitHub. Trình Biên Tập Luồng Chatbot được thiết kế để loại bỏ thông tin meta như vậy và chỉ xuất ra logic hội thoại cần thiết dưới dạng JSON.

Cơ chế và cách sử dụng

Quy trình làm việc cơ bản bao gồm 4 bước sau:

1. Thiết kế luồng hội thoại với trình biên tập trực quan
2. Kiểm tra hoạt động với xem trước trực tiếp
3. Xuất ra dưới dạng JSON
4. Tích hợp với bất kỳ ứng dụng chatbot nào

1. Thiết kế luồng hội thoại với trình biên tập trực quan

Bạn có thể thiết kế luồng chat bằng cách đặt các nút thông qua các thao tác GUI và thêm nút từ nút "+" của mỗi nút. Màn hình bên trái của trình biên tập là màn hình workflow, và bên dưới bên phải là màn hình chỉnh sửa nút.

2. Kiểm tra hoạt động với xem trước chat

Phía trên bên phải của trình biên tập là màn hình xem trước chat. Bạn có thể thử nghiệm luồng bằng cách nhấn nút TestChat. Bằng cách này, bạn có thể kiểm tra hành vi bao gồm xem trước trên một màn hình.

3. Xuất ra dưới dạng JSON

Khi bạn hoàn thành việc thiết kế luồng, bạn có thể xuất luồng dưới định dạng JSON từ nút Export ở phía trên màn hình. Ngược lại, nếu bạn muốn chỉnh sửa một luồng hiện có, bạn có thể tải luồng từ nút Import.

Ví dụ JSON đã xuất như sau:

[
  {
    "id": 1,
    "title": "Chào! Tôi có thể giúp gì cho bạn hôm nay?",
    "options": [
      {
        "label": "Về sản phẩm",
        "nextId": 2
      },
      {
        "label": "Về dịch vụ",
        "nextId": 3
      }
    ],
    "hierarchyPath": "1"
  },
  {
    "id": 2,
    "title": "Bạn muốn biết về sản phẩm nào?",
    "options": [
      {
        "label": "Điện thoại thông minh",
        "nextId": 5
      },
      {
        "label": "Máy tính",
        "nextId": 5
      }
    ],
    "parentId": 1,
    "hierarchyPath": "1-1"
  },
  {
    "id": 3,
    "title": "Bạn muốn biết về dịch vụ nào?",
    "options": [
      {
        "label": "Tùy chọn cho piyo",
        "nextId": 6
      }
    ],
    "parentId": 1,
    "hierarchyPath": "1-2"
  },
  {
    "id": 4,
    "title": "Tiêu đề nút 3",
    "options": [],
    "parentId": 1,
    "hierarchyPath": "1-3"
  },
  {
    "id": 5,
    "title": "fuga",
    "options": [],
    "parentId": 2,
    "hierarchyPath": "1-1-1"
  },
  {
    "id": 6,
    "title": "piyo",
    "options": [],
    "parentId": 3,
    "hierarchyPath": "1-2-1"
  }
]

4. Tích hợp với bất kỳ ứng dụng chatbot nào

Bằng cách tải JSON đã xuất, bạn có thể tích hợp các luồng chat vào bất kỳ ứng dụng web nào. Dòng chảy sử dụng tổng thể được tóm tắt trong một video trên YouTube. Nếu bạn không phiền, tôi rất vui nếu bạn có thể xem nó.

Video hướng dẫn

Dù tất cả tính năng không có trong video, bạn có thể sử dụng giao diện của trình biên tập như một thành phần React cũng vậy.

Tóm tắt

• Trình Biên Tập Luồng Chatbot là một OSS cho phép bạn tạo ra các luồng hội thoại thông qua các thao tác GUI.
• Thiết kế GUI → kiểm tra → xuất JSON → tích hợp với các ứng dụng bên ngoài là có thể.
• Có thể sử dụng từ npm.

Nếu bạn quan tâm, tôi rất vui nếu bạn có thể cho nó một ⭐ trên GitHub.

• GitHub: enumura1/chatbot-flow-editor
• npm: @enumura/chatbot-flow-editor
• Tài liệu: Tài liệu hướng dẫn

Câu hỏi thường gặp

Trình Biên Tập Luồng Chatbot có miễn phí không?

Có, đây là một công cụ mã nguồn mở và hoàn toàn miễn phí để sử dụng.

Tôi có thể tích hợp Trình Biên Tập Luồng Chatbot với ứng dụng nào không?

Bạn có thể tích hợp nó với bất kỳ ứng dụng chatbot hoặc ứng dụng web nào.

Làm thế nào để xuất và nhập luồng JSON?

Bạn có thể sử dụng các nút Export và Import trong giao diện trình biên tập để xuất và nhập các luồng JSON.

Thực tiễn tốt nhất

• Luôn kiểm tra luồng hội thoại của bạn trước khi xuất ra JSON.
• Sử dụng tên nút rõ ràng để dễ dàng quản lý và chỉnh sửa.

Các vấn đề phổ biến

• Không thể thấy rõ khi số lượng nút quá nhiều. Hãy sắp xếp chúng một cách hợp lý.
• Đảm bảo không có thông tin meta không cần thiết trong JSON xuất ra.

Mẹo hiệu suất

• Tối ưu hóa số lượng nút trong luồng để có trải nghiệm người dùng tốt hơn.
• Sử dụng các công cụ bên ngoài để theo dõi hiệu suất của chatbot.

Khắc phục sự cố

• Nếu bạn gặp lỗi khi xuất JSON, hãy kiểm tra lại cấu trúc của các nút trong luồng.
• Đảm bảo rằng bạn đã cài đặt đúng phiên bản npm cần thiết để chạy trình biên tập.