create-openclaw-bot 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +121 -0
- package/CHANGELOG.vi.md +116 -0
- package/README.md +211 -0
- package/README.vi.md +215 -0
- package/SETUP.md +532 -0
- package/SETUP.vi.md +439 -0
- package/cli.js +231 -0
- package/docker/openclaw/Dockerfile +14 -0
- package/docker/openclaw/docker-compose.yml +18 -0
- package/docs/browser-automation-guide.md +207 -0
- package/docs/skills-plugins-guide.md +126 -0
- package/index.html +336 -0
- package/package.json +28 -0
- package/setup.js +1991 -0
- package/start-chrome-debug.bat +15 -0
- package/style.css +1347 -0
package/index.html
ADDED
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="vi">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Setup your own free AI Bot on Telegram or Zalo in minutes with OpenClaw.">
|
|
7
|
+
<title>🦞 OpenClaw Setup — AI Bot Wizard</title>
|
|
8
|
+
<link rel="stylesheet" href="style.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<div class="app-container">
|
|
13
|
+
|
|
14
|
+
<!-- ========== Header ========== -->
|
|
15
|
+
<header class="header">
|
|
16
|
+
<div class="header__logo" aria-hidden="true">🦞</div>
|
|
17
|
+
<h1 class="header__title">OpenClaw Setup</h1>
|
|
18
|
+
<p class="header__subtitle" data-vi="Tạo AI Bot miễn phí trên Telegram hoặc Zalo trong vài phút" data-en="Create your free AI Bot on Telegram or Zalo in minutes">Tạo AI Bot miễn phí trên Telegram hoặc Zalo trong vài phút</p>
|
|
19
|
+
</header>
|
|
20
|
+
|
|
21
|
+
<!-- ========== Progress Bar ========== -->
|
|
22
|
+
<nav class="progress-bar" aria-label="Setup progress">
|
|
23
|
+
<div class="progress-step progress-step--active" data-pstep="1" onclick="window.__navToStep && window.__navToStep(1)" style="cursor:pointer" title="Bước 1">
|
|
24
|
+
<span class="progress-step__circle">1</span>
|
|
25
|
+
<span class="progress-step__label" data-vi="Chọn kênh" data-en="Channel">Chọn kênh</span>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="progress-line" data-after="1"></div>
|
|
28
|
+
<div class="progress-step" data-pstep="2" onclick="window.__navToStep && window.__navToStep(2)" style="cursor:pointer" title="Bước 2">
|
|
29
|
+
<span class="progress-step__circle">2</span>
|
|
30
|
+
<span class="progress-step__label" data-vi="Cấu hình Bot" data-en="Configure Bot">Cấu hình Bot</span>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="progress-line" data-after="2"></div>
|
|
33
|
+
<div class="progress-step" data-pstep="3" onclick="window.__navToStep && window.__navToStep(3)" style="cursor:pointer" title="Bước 3">
|
|
34
|
+
<span class="progress-step__circle">3</span>
|
|
35
|
+
<span class="progress-step__label" data-vi="API Keys" data-en="API Keys">API Keys</span>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="progress-line" data-after="3"></div>
|
|
38
|
+
<div class="progress-step" data-pstep="4" onclick="window.__navToStep && window.__navToStep(4)" style="cursor:pointer" title="Bước 4">
|
|
39
|
+
<span class="progress-step__circle">4</span>
|
|
40
|
+
<span class="progress-step__label" data-vi="Hoàn tất" data-en="Finish">Hoàn tất</span>
|
|
41
|
+
</div>
|
|
42
|
+
</nav>
|
|
43
|
+
|
|
44
|
+
<!-- ========== Steps Container ========== -->
|
|
45
|
+
<main class="steps-container">
|
|
46
|
+
|
|
47
|
+
<!-- ===== Step 1: Choose Channel ===== -->
|
|
48
|
+
<section class="step step--active" data-step="1">
|
|
49
|
+
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
|
|
50
|
+
<h2 class="step__title" data-vi="Chọn kênh chat cho Bot" data-en="Choose Chat Channel" style="margin-bottom: 0;">Chọn kênh chat cho Bot</h2>
|
|
51
|
+
<input type="hidden" id="cfg-language" value="vi">
|
|
52
|
+
<div class="lang-toggle" id="lang-toggle">
|
|
53
|
+
<button type="button" class="lang-toggle__btn lang-toggle__btn--active" data-lang="vi" onclick="window.__selectLang('vi')">
|
|
54
|
+
<span class="lang-toggle__flag" data-lang="vi"></span>
|
|
55
|
+
<span>VI</span>
|
|
56
|
+
</button>
|
|
57
|
+
<button type="button" class="lang-toggle__btn" data-lang="en" onclick="window.__selectLang('en')">
|
|
58
|
+
<span class="lang-toggle__flag" data-lang="en"></span>
|
|
59
|
+
<span>EN</span>
|
|
60
|
+
</button>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<p class="step__description" data-vi="Bot AI của bạn sẽ hoạt động trên nền tảng nào? Chọn 1 kênh bên dưới." data-en="Which platform will your AI Bot operate on? Choose a channel below.">Bot AI của bạn sẽ hoạt động trên nền tảng nào? Chọn 1 kênh bên dưới.</p>
|
|
64
|
+
|
|
65
|
+
<div class="channel-grid">
|
|
66
|
+
<div class="channel-card" data-channel="telegram" id="card-telegram">
|
|
67
|
+
<div class="channel-card__icon"><img src="https://thesvg.org/icons/telegram/default.svg" alt="Telegram" width="32" height="32"></div>
|
|
68
|
+
<h3 class="channel-card__name">Telegram</h3>
|
|
69
|
+
<p class="channel-card__desc" data-vi="Bot API chính thức. Hỗ trợ DM & nhóm. Phổ biến nhất." data-en="Official Bot API. Supports DMs & groups. Most popular.">Bot API chính thức. Hỗ trợ DM & nhóm. Phổ biến nhất.</p>
|
|
70
|
+
<span class="channel-card__badge badge--official">✅ Official</span>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="channel-card" data-channel="zalo-bot" id="card-zalo-bot">
|
|
74
|
+
<div class="channel-card__icon"><img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="Zalo" width="32" height="32"></div>
|
|
75
|
+
<h3 class="channel-card__name">Zalo Bot API</h3>
|
|
76
|
+
<p class="channel-card__desc" data-vi="Bot API chính thức Zalo. Chat 1:1. Phù hợp hỗ trợ khách hàng." data-en="Official Zalo Bot API. 1:1 Chat. Good for customer support.">Bot API chính thức Zalo. Chat 1:1. Phù hợp hỗ trợ khách hàng.</p>
|
|
77
|
+
<span class="channel-card__badge badge--official">✅ Official</span>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="channel-card" data-channel="zalo-personal" id="card-zalo-personal">
|
|
81
|
+
<div class="channel-card__icon"><img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="Zalo" width="32" height="32" style="opacity: 0.9;"></div>
|
|
82
|
+
<h3 class="channel-card__name">Zalo Personal</h3>
|
|
83
|
+
<p class="channel-card__desc" data-vi="Dùng tài khoản Zalo cá nhân. Login bằng QR code." data-en="Use personal Zalo account. Login via QR code.">Dùng tài khoản Zalo cá nhân. Login bằng QR code.</p>
|
|
84
|
+
<span class="channel-card__badge badge--warning">⚠️ Unofficial</span>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</section>
|
|
88
|
+
|
|
89
|
+
<!-- ===== Step 2: Bot Config ===== -->
|
|
90
|
+
<section class="step" data-step="2">
|
|
91
|
+
<h2 class="step__title"><span data-vi="Cấu hình Bot — " data-en="Configure Bot — ">Cấu hình Bot — </span><span id="selected-channel-label"></span></h2>
|
|
92
|
+
<p class="step__description" data-vi="Chọn AI model, đặt tên, tính cách và quy tắc cho Bot của bạn." data-en="Choose AI model, set name, persona and rules for your Bot.">Chọn AI model, đặt tên, tính cách và quy tắc cho Bot của bạn.</p>
|
|
93
|
+
|
|
94
|
+
<!-- ─── 1. AI Provider Selection (TOP) ─── -->
|
|
95
|
+
<div class="form-group">
|
|
96
|
+
<label class="form-group__label" data-vi="Nhà cung cấp AI" data-en="AI Provider">Nhà cung cấp AI</label>
|
|
97
|
+
<div class="provider-grid" id="provider-grid">
|
|
98
|
+
<!-- Rendered by JS -->
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- ─── 2. Model Selection + Language Toggle ─── -->
|
|
103
|
+
<div class="form-group">
|
|
104
|
+
<div class="model-header">
|
|
105
|
+
<label class="form-group__label" for="cfg-model">AI Model</label>
|
|
106
|
+
|
|
107
|
+
</div>
|
|
108
|
+
<select class="form-select" id="cfg-model">
|
|
109
|
+
<!-- Populated by JS based on provider -->
|
|
110
|
+
</select>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<!-- ─── Section divider ─── -->
|
|
114
|
+
<div class="section-divider">
|
|
115
|
+
<span class="section-divider__icon">🤖</span>
|
|
116
|
+
<span class="section-divider__text" data-vi="Danh tính & Tính cách Bot" data-en="Identity & Persona">Danh tính & Tính cách Bot</span>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<!-- ─── 3. Bot Identity (Name, Role, Emoji, Vibe) ─── -->
|
|
120
|
+
<div class="identity-grid">
|
|
121
|
+
<div class="form-group">
|
|
122
|
+
<label class="form-group__label" for="cfg-name" data-vi="Tên Bot" data-en="Bot Name">Tên Bot</label>
|
|
123
|
+
<input type="text" class="form-input" id="cfg-name" placeholder="VD: Williams, Jarvis, Luna..." oninput="window.__validateKeys()">
|
|
124
|
+
</div>
|
|
125
|
+
<div class="form-group">
|
|
126
|
+
<label class="form-group__label" for="cfg-desc" data-vi="Vai trò / Mô tả" data-en="Role / Description">Vai trò / Mô tả</label>
|
|
127
|
+
<input type="text" class="form-input" id="cfg-desc" placeholder="VD: Trợ lý AI cá nhân" value="Trợ lý">
|
|
128
|
+
</div>
|
|
129
|
+
<div class="form-group">
|
|
130
|
+
<label class="form-group__label" for="cfg-emoji">Emoji</label>
|
|
131
|
+
<input type="text" class="form-input form-input--emoji" id="cfg-emoji" value="🤖" maxlength="4">
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<p class="form-group__hint" style="margin-top: -12px; margin-bottom: 24px;" data-vi="Các thông tin trên sẽ vào <code>IDENTITY.md</code> — nơi bot biết tên mình và cách xưng hô." data-en="This info configures <code>IDENTITY.md</code> — where the bot knows its name and how to address itself.">Các thông tin trên sẽ vào <code>IDENTITY.md</code> — nơi bot biết tên mình và cách xưng hô.</p>
|
|
135
|
+
|
|
136
|
+
<!-- ─── 4. Personality / System Prompt (→ SOUL.md + AGENTS.md) ─── -->
|
|
137
|
+
<div class="form-group">
|
|
138
|
+
<label class="form-group__label" for="cfg-prompt" data-vi="Tính cách, Vibe & Quy tắc trả lời" data-en="Personality, Vibe & Rules">Tính cách, Vibe & Quy tắc trả lời</label>
|
|
139
|
+
<textarea class="form-textarea" id="cfg-prompt" placeholder="Mô tả tính cách, vibe, phong cách trả lời, quy tắc cho bot..."></textarea>
|
|
140
|
+
<div class="prompt-notice">
|
|
141
|
+
<span class="prompt-notice__icon">📝</span>
|
|
142
|
+
<span class="prompt-notice__text" data-vi="Nội dung trên sẽ vào <code>SOUL.md</code> (tính cách) và <code>AGENTS.md</code> (quy tắc vận hành). OpenClaw tự động inject vào context đầu mỗi session." data-en="This configures <code>SOUL.md</code> (personality) and <code>AGENTS.md</code> (rules). OpenClaw automatically injects this into every session.">Nội dung trên sẽ vào <code>SOUL.md</code> (tính cách) và <code>AGENTS.md</code> (quy tắc vận hành). OpenClaw tự động inject vào context đầu mỗi session.</span>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<!-- ─── 4b. User Info (→ USER.md) ─── -->
|
|
147
|
+
<div class="form-group">
|
|
148
|
+
<label class="form-group__label" for="cfg-user-info" data-vi="👤 Thông tin về bạn (để bot hiểu bạn hơn)" data-en="👤 About You (so the bot replies better)">👤 Thông tin về bạn (để bot hiểu bạn hơn)</label>
|
|
149
|
+
<textarea class="form-textarea" id="cfg-user-info" placeholder="VD: Mình là dev, thích code Python, múi giờ UTC+7. Thích câu trả lời đi thẳng vào vấn đề, không rào trước đón sau..." style="min-height: 100px;"></textarea>
|
|
150
|
+
<div class="prompt-notice">
|
|
151
|
+
<span class="prompt-notice__icon">👤</span>
|
|
152
|
+
<span class="prompt-notice__text" data-vi="Nội dung trên sẽ vào <code>USER.md</code> — bot dùng để cá nhân hóa cách trả lời cho bạn. Để trống nếu chưa muốn điền." data-en="This configures <code>USER.md</code> — used to personalize answers for you. Leave blank if not needed.">Nội dung trên sẽ vào <code>USER.md</code> — bot dùng để cá nhân hóa cách trả lời cho bạn. Để trống nếu chưa muốn điền.</span>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<!-- ─── Section divider ─── -->
|
|
157
|
+
<div class="section-divider">
|
|
158
|
+
<span class="section-divider__icon">🔐</span>
|
|
159
|
+
<span class="section-divider__text" data-vi="Quy tắc Bảo mật" data-en="Security Rules">Quy tắc Bảo mật</span>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<!-- ─── 5. Security Rules (editable) ─── -->
|
|
163
|
+
<div class="form-group">
|
|
164
|
+
<div class="security-rules-header">
|
|
165
|
+
<label class="form-group__label" data-vi="Quy tắc bảo mật mặc định" data-en="Default Security Rules">Quy tắc bảo mật mặc định</label>
|
|
166
|
+
<button type="button" class="btn-toggle-edit" id="btn-toggle-security" onclick="window.__toggleSecurityEdit()"><span data-vi="✏️ Sửa" data-en="✏️ Edit">✏️ Sửa</span></button>
|
|
167
|
+
</div>
|
|
168
|
+
<p class="form-group__hint" style="margin-bottom: 12px;" data-vi="OpenClaw tự áp dụng các quy tắc này. Bạn có thể sửa nếu cần." data-en="OpenClaw applies these rules by default. You can edit if needed.">OpenClaw tự áp dụng các quy tắc này. Bạn có thể sửa nếu cần.</p>
|
|
169
|
+
<textarea class="form-textarea security-textarea" id="cfg-security" readonly></textarea>
|
|
170
|
+
<div class="prompt-notice" style="background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02)); border-color: rgba(239,68,68,0.15);">
|
|
171
|
+
<span class="prompt-notice__icon">🛡️</span>
|
|
172
|
+
<span class="prompt-notice__text" style="color: var(--text-secondary);" data-vi="<strong style='color: #f87171;'>Quan trọng:</strong> Các quy tắc này bảo vệ hệ thống, credentials, và ví crypto. Sửa cẩn thận — xóa quy tắc bảo mật có thể gây rủi ro." data-en="<strong style='color: #f87171;'>Important:</strong> These rules protect your system, credentials, and crypto wallets. Edit carefully — removing them causes risk."><strong style="color: #f87171;">Quan trọng:</strong> Các quy tắc này bảo vệ hệ thống, credentials, và ví crypto. Sửa cẩn thận — xóa quy tắc bảo mật có thể gây rủi ro.</span>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<!-- ─── Section divider ─── -->
|
|
177
|
+
<div class="section-divider">
|
|
178
|
+
<span class="section-divider__icon">🧩</span>
|
|
179
|
+
<span class="section-divider__text" data-vi="Mở rộng" data-en="Extensions">Mở rộng</span>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<!-- ─── 6. Skills (ClawHub) ─── -->
|
|
183
|
+
<div class="form-group">
|
|
184
|
+
<label class="form-group__label" data-vi="🧠 Skills — Kỹ năng mở rộng" data-en="🧠 Skills — Capabilities">🧠 Skills — Kỹ năng mở rộng</label>
|
|
185
|
+
<p class="form-group__hint" style="margin-bottom: 12px;" data-vi="Chọn skills để bot có thêm khả năng. Được cài từ <a href='https://clawhub.com' target='_blank' style='color: var(--claw-coral);'>ClawHub</a> registry." data-en="Choose skills to give your bot new superpowers. Installed from <a href='https://clawhub.com' target='_blank' style='color: var(--claw-coral);'>ClawHub</a> registry.">Chọn skills để bot có thêm khả năng. Được cài từ <a href="https://clawhub.com" target="_blank" style="color: var(--claw-coral);">ClawHub</a> registry.</p>
|
|
186
|
+
<div class="plugin-grid" id="plugin-grid">
|
|
187
|
+
<!-- Rendered by JS -->
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<!-- ─── 7. Plugins (npm packages — extra channels) ─── -->
|
|
192
|
+
<div class="form-group">
|
|
193
|
+
<label class="form-group__label" data-vi="🔌 Plugins — Kênh & mở rộng thêm" data-en="🔌 Plugins — Channels & Addons">🔌 Plugins — Kênh & mở rộng thêm</label>
|
|
194
|
+
<p class="form-group__hint" style="margin-bottom: 12px;" data-vi="Thêm kênh chat hoặc tính năng runtime. Cài qua npm (<code>openclaw plugins install</code>)." data-en="Add chat channels or runtime features. Installed via npm (<code>openclaw plugins install</code>).">Thêm kênh chat hoặc tính năng runtime. Cài qua npm (<code>openclaw plugins install</code>).</p>
|
|
195
|
+
<div class="plugin-grid" id="extra-plugin-grid">
|
|
196
|
+
<!-- Rendered by JS -->
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</section>
|
|
200
|
+
|
|
201
|
+
<!-- ===== Step 3: API Keys & Thư Mục ===== -->
|
|
202
|
+
<section class="step" data-step="3">
|
|
203
|
+
<h2 class="step__title" data-vi="Nhập API Keys & Thư mục" data-en="Enter API Keys & Folder">Nhập API Keys & Thư mục</h2>
|
|
204
|
+
<p class="step__description" data-vi="Nhập key trực tiếp + chọn nơi lưu project — wizard lo phần còn lại." data-en="Enter keys + choose project folder — the wizard handles the rest.">Nhập key trực tiếp + chọn nơi lưu project — wizard lo phần còn lại.</p>
|
|
205
|
+
|
|
206
|
+
<div class="cred-section">
|
|
207
|
+
<h3 class="cred-section__title" data-vi="📋 Hướng dẫn lấy credentials" data-en="📋 How to get credentials">📋 Hướng dẫn lấy credentials</h3>
|
|
208
|
+
<div id="cred-steps"></div>
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
<!-- Dynamic key inputs (rendered by JS based on channel + provider) -->
|
|
212
|
+
<div id="key-inputs" style="margin-top: 20px;"></div>
|
|
213
|
+
|
|
214
|
+
<!-- Project Path Input -->
|
|
215
|
+
<div class="form-group" style="margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06);">
|
|
216
|
+
<label class="form-group__label" data-vi="Thư mục lưu trữ Bot (Trên máy chứa Docker)" data-en="Bot Directory (On Docker host)">Thư mục lưu trữ Bot (Trên máy chứa Docker)</label>
|
|
217
|
+
<input type="text" class="form-input" id="cfg-project-path" value="D:\openclaw-setup" placeholder="VD: D:\openclaw-setup hoặc /home/user/openclaw-setup" style="font-family: monospace;">
|
|
218
|
+
<p class="form-group__hint" data-vi="Script sẽ tự động tạo thư mục này và sinh các file config bên trong." data-en="The script will auto-create this folder and generate config files inside.">Script sẽ tự động tạo thư mục này và sinh các file config bên trong.</p>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div style="margin-top: 16px; padding: 10px 14px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 8px; font-size: 12px; color: var(--text-secondary);">
|
|
222
|
+
🔒 <span data-vi="Keys chỉ lưu trên máy bạn — không gửi đi đâu. Wizard chạy 100% client-side." data-en="Keys stay on your machine — never sent anywhere. Wizard runs 100% client-side.">Keys chỉ lưu trên máy bạn — không gửi đi đâu. Wizard chạy 100% client-side.</span>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
<!-- Hidden .env content for internal use -->
|
|
226
|
+
<pre id="env-content" style="display:none;"></pre>
|
|
227
|
+
|
|
228
|
+
<div class="warning-box" id="zalo-warning" style="display: none;">
|
|
229
|
+
<span class="warning-box__icon">⚠️</span>
|
|
230
|
+
<span class="warning-box__text" data-vi="<strong>Zalo Personal</strong> sử dụng unofficial API (zca-js). Tài khoản Zalo của bạn có thể bị hạn chế hoặc khóa. Chỉ nên dùng với tài khoản phụ." data-en="<strong>Zalo Personal</strong> uses an unofficial API (zca-js). Your account may be restricted or blocked. Always use an alternate account."><strong>Zalo Personal</strong> sử dụng unofficial API (zca-js). Tài khoản Zalo của bạn có thể bị hạn chế hoặc khóa. Chỉ nên dùng với tài khoản phụ.</span>
|
|
231
|
+
</div>
|
|
232
|
+
</section>
|
|
233
|
+
|
|
234
|
+
<!-- ===== Step 4: Generated Output ===== -->
|
|
235
|
+
<section class="step" data-step="4">
|
|
236
|
+
<h2 id="step4-title" class="step__title" data-vi="🎉 Sẵn sàng! Chọn cách cài đặt" data-en="🎉 Ready! Choose install method">🎉 Sẵn sàng! Chọn cách cài đặt</h2>
|
|
237
|
+
<p id="step4-desc" class="step__description" data-vi="Chọn 1 trong 2 cách bên dưới để setup bot tự động." data-en="Choose one of the two methods below to auto-setup your bot.">Chọn 1 trong 2 cách bên dưới để setup bot tự động.</p>
|
|
238
|
+
|
|
239
|
+
<!-- Option 1: Windows .bat -->
|
|
240
|
+
<div class="output-section" style="padding: 24px; border: 2px solid rgba(16, 185, 129, 0.3); border-radius: 12px; background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(139,92,246,0.03)); margin-bottom: 20px;">
|
|
241
|
+
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
|
|
242
|
+
<span style="font-size: 28px;">🪟</span>
|
|
243
|
+
<div>
|
|
244
|
+
<h3 class="output-section__title" style="margin: 0;" data-vi="Cách 1: Windows — Download & Double-click" data-en="Option 1: Windows — Download & Double-click">Cách 1: Windows — Download & Double-click</h3>
|
|
245
|
+
<p style="font-size: 13px; color: var(--text-muted); margin: 4px 0 0;" data-vi="Tải file .bat → double-click → tạo project + build Docker + chạy bot. Xong!" data-en="Download .bat → double-click → creates project + builds Docker + starts bot. Done!">Tải file .bat → double-click → tạo project + build Docker + chạy bot. Xong!</p>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
<div style="display: flex; justify-content: center; margin: 20px 0 8px;">
|
|
249
|
+
<button class="btn btn--primary" onclick="downloadAutoSetupBat()" style="font-size: 15px; padding: 14px 40px; border-radius: 8px;">
|
|
250
|
+
<span data-vi="📥 Download setup-openclaw.bat" data-en="📥 Download setup-openclaw.bat">📥 Download setup-openclaw.bat</span>
|
|
251
|
+
</button>
|
|
252
|
+
</div>
|
|
253
|
+
<p style="font-size: 12px; color: var(--text-muted); margin: 0; text-align: center;" data-vi="Yêu cầu: Docker Desktop đã cài và đang chạy" data-en="Requires: Docker Desktop installed and running">Yêu cầu: Docker Desktop đã cài và đang chạy</p>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<!-- Option 2: Linux/macOS Terminal -->
|
|
257
|
+
<div class="output-section" style="padding: 24px; border: 2px solid rgba(255, 107, 53, 0.3); border-radius: 12px; background: linear-gradient(135deg, rgba(255,107,53,0.04), rgba(139,92,246,0.03)); margin-bottom: 20px;">
|
|
258
|
+
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
|
|
259
|
+
<span style="font-size: 28px;">🐧</span>
|
|
260
|
+
<div>
|
|
261
|
+
<h3 class="output-section__title" style="margin: 0;" data-vi="Cách 2: Linux / macOS / Terminal" data-en="Option 2: Linux / macOS / Terminal">Cách 2: Linux / macOS / Terminal</h3>
|
|
262
|
+
<p style="font-size: 13px; color: var(--text-muted); margin: 4px 0 0;" data-vi="Chạy lệnh bên dưới trong Terminal để bắt đầu interactive setup." data-en="Run the command below in Terminal to start interactive setup.">Chạy lệnh bên dưới trong Terminal để bắt đầu interactive setup.</p>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
<div class="code-block">
|
|
266
|
+
<div class="code-block__header">
|
|
267
|
+
<span class="code-block__filename">Terminal</span>
|
|
268
|
+
<button class="btn-copy" onclick="copyToClipboard(this, 'out-setup-npx')">📋 Copy</button>
|
|
269
|
+
</div>
|
|
270
|
+
<pre class="code-block__content" id="out-setup-npx" style="font-size: 15px; text-align: center; padding: 16px;">npx create-openclaw-bot</pre>
|
|
271
|
+
</div>
|
|
272
|
+
<p style="font-size: 12px; color: var(--text-muted); margin: 12px 0 0; text-align: center;" data-vi="Yêu cầu: Node.js 18+ và Docker Compose v2" data-en="Requires: Node.js 18+ and Docker Compose v2">Yêu cầu: Node.js 18+ và Docker Compose v2</p>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<!-- ===== Post-setup notices (conditional) ===== -->
|
|
276
|
+
|
|
277
|
+
<!-- Zalo Personal: Post-setup Docker Onboard Guide -->
|
|
278
|
+
<div id="zalo-onboard-notice" class="cred-section" style="display: none; margin-top: 24px; border-color: rgba(255, 193, 7, 0.3);">
|
|
279
|
+
<h3 class="cred-section__title" data-vi="📱 Sau khi bot chạy — Login Zalo QR (1 Lần)" data-en="📱 After bot starts — Login Zalo QR (1 Lần)">📱 Sau khi bot chạy — Login Zalo QR (1 Lần)</h3>
|
|
280
|
+
<p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;" data-vi="Chạy lệnh bên dưới để mở quét mã QR cho Zalo:" data-en="Run this command to scan QR code for Zalo:">Chạy lệnh bên dưới để mở quét mã QR cho Zalo:</p>
|
|
281
|
+
<div class="code-block" style="margin-bottom: 12px;">
|
|
282
|
+
<div class="code-block__header">
|
|
283
|
+
<span class="code-block__filename" data-vi="Terminal" data-en="Terminal">Terminal</span>
|
|
284
|
+
<button class="btn-copy" onclick="copyToClipboard(this, 'out-zalo-onboard-cmd')">📋 Copy</button>
|
|
285
|
+
</div>
|
|
286
|
+
<pre class="code-block__content" id="out-zalo-onboard-cmd"></pre>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="code-block" style="font-size: 13px; margin-bottom: 12px;">
|
|
289
|
+
<div class="code-block__header">
|
|
290
|
+
<span class="code-block__filename" data-vi="Cheat Sheet — Chọn các tùy chọn này" data-en="Cheat Sheet — Select these options">Cheat Sheet — Chọn các tùy chọn này</span>
|
|
291
|
+
</div>
|
|
292
|
+
<pre class="code-block__content" id="out-zalo-onboard-guide"></pre>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<!-- 9Router post-setup -->
|
|
297
|
+
<div id="9router-notice" class="cred-section" style="display: none; margin-top: 24px; border-color: rgba(0, 200, 150, 0.3);">
|
|
298
|
+
<h3 class="cred-section__title"><span data-vi="🔀 Sau khi bot chạy — Setup 9Router" data-en="🔀 After bot starts — Setup 9Router">🔀 Sau khi bot chạy — Setup 9Router</span></h3>
|
|
299
|
+
<div style="font-size: 14px; color: var(--text-secondary);">
|
|
300
|
+
<div class="cred-step" style="margin-bottom: 8px;">
|
|
301
|
+
<span class="cred-step__number">1</span>
|
|
302
|
+
<span class="cred-step__text"><span data-vi="Mở trình duyệt" data-en="Open browser">Mở trình duyệt</span> → <a href="http://localhost:20128/dashboard" target="_blank" style="color: var(--accent);">localhost:20128/dashboard</a></span>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="cred-step" style="margin-bottom: 8px;">
|
|
305
|
+
<span class="cred-step__number">2</span>
|
|
306
|
+
<span class="cred-step__text" data-vi="Đăng nhập OAuth vào các AI provider (Google, Claude...)" data-en="OAuth login to AI providers (Google, Claude...)">Đăng nhập OAuth vào các AI provider (Google, Claude...)</span>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
|
|
311
|
+
<!-- Browser notice -->
|
|
312
|
+
<div id="browser-notice" class="cred-section" style="display: none; margin-top: 24px; border-color: rgba(66, 133, 244, 0.3);">
|
|
313
|
+
<h3 class="cred-section__title"><span data-vi="🌐 Browser Automation — Bật Chrome Debug" data-en="🌐 Browser Automation — Enable Chrome Debug">🌐 Browser Automation — Bật Chrome Debug</span></h3>
|
|
314
|
+
<p style="font-size: 13px; color: var(--text-secondary);">
|
|
315
|
+
<span data-vi="File <code>start-chrome-debug.bat</code> đã được tạo trong project. <b>Double-click</b> nó trên máy tính của bạn trước khi nhờ bot làm gì liên quan tới web." data-en="The file <code>start-chrome-debug.bat</code> was created in your project. <b>Double-click</b> it on your PC before asking bot to do web tasks.">File <code>start-chrome-debug.bat</code> đã được tạo trong project. <b>Double-click</b> nó trên máy tính của bạn trước khi nhờ bot làm gì liên quan tới web.</span>
|
|
316
|
+
</p>
|
|
317
|
+
</div>
|
|
318
|
+
</section>
|
|
319
|
+
|
|
320
|
+
</main>
|
|
321
|
+
|
|
322
|
+
<!-- ========== Navigation ========== -->
|
|
323
|
+
<div class="nav-buttons">
|
|
324
|
+
<button class="btn btn--ghost" id="btn-prev" style="visibility: hidden;">
|
|
325
|
+
<span data-vi="← Quay lại" data-en="← Go Back">← Quay lại</span>
|
|
326
|
+
</button>
|
|
327
|
+
<button class="btn btn--primary" id="btn-next" disabled>
|
|
328
|
+
<span id="btn-next-label" data-vi="Tiếp theo" data-en="Next">Tiếp theo</span> →
|
|
329
|
+
</button>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
</div>
|
|
333
|
+
|
|
334
|
+
<script src="setup.js"></script>
|
|
335
|
+
</body>
|
|
336
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "create-openclaw-bot",
|
|
3
|
+
"version": "4.0.1",
|
|
4
|
+
"description": "Interactive CLI for setting up OpenClaw bot autonomously",
|
|
5
|
+
"main": "cli.js",
|
|
6
|
+
"bin": {
|
|
7
|
+
"create-openclaw-bot": "./cli.js"
|
|
8
|
+
},
|
|
9
|
+
"scripts": {
|
|
10
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
11
|
+
},
|
|
12
|
+
"keywords": [
|
|
13
|
+
"openclaw",
|
|
14
|
+
"cli",
|
|
15
|
+
"bot",
|
|
16
|
+
"zalo",
|
|
17
|
+
"telegram",
|
|
18
|
+
"ai"
|
|
19
|
+
],
|
|
20
|
+
"author": "OpenClaw Team",
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"@inquirer/prompts": "^4.3.1",
|
|
24
|
+
"chalk": "^5.3.0",
|
|
25
|
+
"fs-extra": "^11.2.0"
|
|
26
|
+
},
|
|
27
|
+
"type": "module"
|
|
28
|
+
}
|