peekobot下載 - peekobot原始碼下載

peekobot

Ai源碼

1.0.0

下載

窺視機器人

Peekobot 是一個簡單的、選擇驅動的聊天機器人框架，用不到100 行 ES6 vanilla JavaScript（和一些 CSS）編寫而成。

您可以在/docs資料夾中看到一個範例機器人。

還有一個 CodePen 可供您修改。

特徵

小、簡單、零依賴（除非你需要舊瀏覽器相容性）
將您的對話定義為簡單的 JavaScript 對象
選擇/按鈕驅動的對話
連結到 URL 以及對話其他部分的選項

瀏覽器相容性

我使用 async/await 和 CSS 自訂屬性，因此，一般來說，不支援 Internet Explorer 和 Opera Mini。

您可以使用 Babel 或類似工具為 JavaScript 帶來 IE11 相容性。

如果需要，您也可以手動內聯 CSS 自訂屬性。

用法

Peekobot 不是一個套件或函式庫。你不能npm install它。將其視為入門套件或框架。這個想法是你拿一份它的副本並用它做你自己的事情。

如果你確實使用它，請寫信給我並告訴我你做了什麼！我很想看看其他人正在用它做什麼。謝謝！？

要使用 Peekobot，您需要：

將 Peekobot 腳本和樣式新增到您的 HTML 中
將 Peekobot 標記新增到您的 HTML 中
定義你的對話

1. 將 Peekobot 腳本和樣式新增至 HTML

將peekobot.js和peekobot.css檔案下載到您的專案中。

您可以透過從 GitHub 取得這些檔案的原始程式碼或複製專案來完成此操作。

然後將 Peekobot 腳本和樣式新增到您的 HTML 中。

這些應該放在head中：

    <!-- Peekobot 自訂屬性（CSS 變數）- 設定這些！ --><樣式>:根{
            --peekobot 高度：80vh；
            --peekobot-頭像: url();
        }</style><!-- Peekobot 樣式 --><link rel="stylesheet" href="peekobot.css">

請注意，您可以在此處更改聊天機器人視窗的高度，並定義聊天機器人在聊天中使用的「頭像」URL。它應該很小，呈方形，並且適合圓形。我的 CSS 顯示為 24 像素正方形，因此 48 像素 x 48 像素的圖片應該沒問題。

這些應該位於 HTML 的底部以載入 JavaScript：

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. 將 Peekobot 標籤加入您的 HTML 正文中

將 Peekobot 標籤加入您希望聊天機器人出現的 HTML 正文中：

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3.定義你的對話

對話定義應放置在名為chat的 JavaScript 變數中。我在conversation.js檔案中定義了它。如果您願意，可以內聯它。

chat變數應該是一個物件。在聊天對像中：

第一個屬性名稱/鍵應該是數字 1
後續屬性名稱可以是數字或字串 - 字串允許您對對話的各個部分進行分組
每個屬性值都是對話中的一個條目。

對話條目應該包含：

text屬性，即聊天機器人在對話中此時所說的內容
任何一個：

next一個屬性，透過指定聊天物件的數字鍵來定義下一個聊天條目，當聊天機器人需要依序說出幾件事而不需要使用者輸入時使用，或者
定義使用者可以採取的選擇options屬性。這是一個選項物件的陣列。

選項物件應該具有：

一個text屬性，是使用者選擇的標籤，並且
next一個屬性，透過聲明聊天物件的屬性鍵來定義下一個聊天條目，並在使用者選擇此選項時使用或
url屬性，定義用戶要訪問的鏈接

一個簡單的聊天物件範例是：

 const chat = {1: {text: '早安先生',next: '問題1'},question1: {text: '您早餐想喝茶還是咖啡嗎？ next: 'response1'},{text: '咖啡',next: 'response2'}]},response1: {text: '非常棒- 如果我自己這麼說的話，這是一杯好喝的飲料。 response2: {text: '如您所願，先生'}}