django-lucy-assist 0.1.0__py3-none-any.whl → 1.0.2__py3-none-any.whl

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.
@@ -7,19 +7,19 @@
7
7
  {# CSS Lucy Assist #}
8
8
  <link href="{% static 'lucy_assist/css/lucy-assist.css' %}" rel="stylesheet">
9
9
 
10
- {# Script Lucy Assist - doit être chargé avant d'utiliser le composant Alpine #}
10
+ {# Script Lucy Assist - doit etre charge avant d'utiliser le composant Alpine #}
11
11
  <script src="{% static 'lucy_assist/js/lucy-assist.js' %}"></script>
12
12
 
13
13
  <div x-data="lucyAssist()" x-init="init()" @keydown.window="handleKeydown($event)">
14
- {# Bouton flottant - masqué quand le chat est ouvert #}
14
+ {# Bouton flottant - masque quand le chat est ouvert #}
15
15
  <button
16
16
  x-show="!isOpen"
17
17
  @click="toggleSidebar()"
18
- class="fixed right-4 bottom-4 z-50 btn btn-circle btn-lg btn-primary shadow-lg hover:scale-110 transition-transform"
18
+ class="lucy-float-btn"
19
19
  :class="{ 'animate-pulse': hasNewMessage }"
20
20
  title="Ouvrir Lucy (Ctrl+K)"
21
21
  >
22
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
22
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
23
23
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
24
24
  </svg>
25
25
  </button>
@@ -28,26 +28,25 @@
28
28
  <div
29
29
  x-show="isOpen"
30
30
  x-transition:enter="transition ease-out duration-300"
31
- x-transition:enter-start="translate-x-full"
32
- x-transition:enter-end="translate-x-0"
31
+ x-transition:enter-start="transform translate-x-full"
32
+ x-transition:enter-end="transform translate-x-0"
33
33
  x-transition:leave="transition ease-in duration-200"
34
- x-transition:leave-start="translate-x-0"
35
- x-transition:leave-end="translate-x-full"
36
- class="fixed right-0 top-0 h-full w-96 bg-base-100 shadow-2xl z-999 flex flex-col border-l border-base-300"
34
+ x-transition:leave-start="transform translate-x-0"
35
+ x-transition:leave-end="transform translate-x-full"
36
+ class="lucy-sidebar"
37
+ :class="{ 'hidden': !isOpen }"
38
+ style="display: none;"
39
+ x-cloak
37
40
  >
38
41
  {# Header #}
39
- <div class="navbar bg-primary text-primary-content px-4">
40
- <div class="flex-1">
41
- <span class="text-lg font-bold">
42
- Lucy Assist
43
- </span>
44
- </div>
45
- <div class="flex-none gap-1">
42
+ <div class="lucy-header">
43
+ <span class="lucy-header-title">Lucy Assist</span>
44
+ <div class="lucy-header-actions">
46
45
  {# Bouton Historique #}
47
46
  <button
48
47
  @click="showHistory = !showHistory; showDoc = false"
49
- class="btn btn-ghost btn-sm btn-circle"
50
- :class="{ 'bg-primary-focus': showHistory }"
48
+ class="lucy-header-btn"
49
+ :class="{ 'active': showHistory }"
51
50
  title="Historique des conversations"
52
51
  >
53
52
  <i class="fa-solid fa-clock-rotate-left"></i>
@@ -56,7 +55,7 @@
56
55
  {# Bouton Nouvelle conversation #}
57
56
  <button
58
57
  @click="newConversation()"
59
- class="btn btn-ghost btn-sm btn-circle"
58
+ class="lucy-header-btn"
60
59
  title="Nouvelle conversation"
61
60
  >
62
61
  <i class="fa-solid fa-plus"></i>
@@ -65,8 +64,8 @@
65
64
  {# Bouton Documentation #}
66
65
  <button
67
66
  @click="showDoc = !showDoc; showHistory = false"
68
- class="btn btn-ghost btn-sm btn-circle"
69
- :class="{ 'bg-primary-focus': showDoc }"
67
+ class="lucy-header-btn"
68
+ :class="{ 'active': showDoc }"
70
69
  title="Documentation"
71
70
  >
72
71
  <i class="fa-solid fa-book"></i>
@@ -75,7 +74,7 @@
75
74
  {# Bouton Fermer #}
76
75
  <button
77
76
  @click="closeSidebar()"
78
- class="btn btn-ghost btn-sm btn-circle"
77
+ class="lucy-header-btn"
79
78
  title="Fermer (Echap)"
80
79
  >
81
80
  <i class="fa-solid fa-xmark"></i>
@@ -83,51 +82,51 @@
83
82
  </div>
84
83
  </div>
85
84
 
86
- {# Indicateur de crédits #}
87
- <div class="px-4 py-2 bg-base-200 text-sm flex items-center justify-between">
88
- <span class="text-base-content/70">
89
- <i class="fa-solid fa-coins mr-1"></i>
90
- <span x-text="formatTokens(tokensDisponibles)"></span> crédits
85
+ {# Indicateur de credits #}
86
+ <div class="lucy-credits-bar">
87
+ <span>
88
+ <i class="fa-solid fa-coins"></i>
89
+ <span x-text="formatTokens(tokensDisponibles)"></span> credits
91
90
  </span>
92
91
  <button
93
92
  x-show="tokensDisponibles < 100000"
94
93
  @click="showBuyCredits = true"
95
- class="btn btn-xs btn-warning"
94
+ class="lucy-btn-warning"
96
95
  >
97
- <i class="fa-solid fa-cart-plus mr-1"></i>
96
+ <i class="fa-solid fa-cart-plus"></i>
98
97
  Acheter
99
98
  </button>
100
99
  </div>
101
100
 
102
101
  {# Contenu principal #}
103
- <div class="flex-1 overflow-hidden flex flex-col">
102
+ <div class="lucy-content">
104
103
  {# Vue Historique #}
105
104
  <template x-if="showHistory">
106
- <div class="flex-1 overflow-y-auto p-4">
107
- <h3 class="font-semibold mb-3">Historique des conversations</h3>
105
+ <div class="lucy-history">
106
+ <h3>Historique des conversations</h3>
108
107
  <template x-if="conversations.length === 0">
109
- <p class="text-base-content/60 text-sm">Aucune conversation</p>
108
+ <p class="lucy-history-empty">Aucune conversation</p>
110
109
  </template>
111
- <div class="space-y-2">
110
+ <div class="lucy-history-list">
112
111
  <template x-for="conv in conversations" :key="conv.id">
113
112
  <div
114
113
  @click="loadConversation(conv.id)"
115
- class="p-3 rounded-lg bg-base-200 hover:bg-base-300 cursor-pointer transition-colors"
116
- :class="{ 'ring-2 ring-primary': currentConversationId === conv.id }"
114
+ class="lucy-history-item"
115
+ :class="{ 'active': currentConversationId === conv.id }"
117
116
  >
118
- <div class="font-medium text-sm truncate" x-text="conv.titre"></div>
119
- <div class="text-xs text-base-content/60 mt-1">
117
+ <div class="lucy-history-item-title" x-text="conv.titre"></div>
118
+ <div class="lucy-history-item-meta">
120
119
  <span x-text="formatDate(conv.created_date)"></span>
121
- <span class="ml-2">
120
+ <span style="margin-left: 0.5rem;">
122
121
  <i class="fa-solid fa-coins"></i>
123
122
  <span x-text="conv.total_tokens"></span> tokens | <span x-text="formatTokenCost(conv.total_tokens)"></span>
124
123
  </span>
125
124
  </div>
126
125
  <button
127
126
  @click.stop="deleteConversation(conv.id)"
128
- class="btn btn-ghost btn-xs text-error mt-1"
127
+ class="lucy-btn-delete"
129
128
  >
130
- <i class="fa-solid fa-trash"></i>
129
+ <i class="fa-solid fa-trash"></i> Supprimer
131
130
  </button>
132
131
  </div>
133
132
  </template>
@@ -137,39 +136,37 @@
137
136
 
138
137
  {# Vue Documentation #}
139
138
  <template x-if="showDoc">
140
- <div class="flex-1 overflow-y-auto p-4">
139
+ <div class="lucy-doc">
141
140
  {% include "lucy_assist/partials/documentation_content.html" %}
142
141
  </div>
143
142
  </template>
144
143
 
145
144
  {# Vue Chat #}
146
145
  <template x-if="!showHistory && !showDoc">
147
- <div class="flex-1 flex flex-col overflow-hidden">
146
+ <div class="lucy-chat">
148
147
  {# Zone de messages #}
149
148
  <div
150
149
  x-ref="messagesContainer"
151
- class="flex-1 overflow-y-auto p-4 space-y-4"
150
+ class="lucy-messages"
152
151
  >
153
152
  {# Message de bienvenue / Suggestions #}
154
153
  <template x-if="messages.length === 0">
155
- <div class="text-center py-8">
156
- <div class="text-4xl mb-4">
157
- <img class="mx-auto w-20" src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy">
154
+ <div class="lucy-welcome">
155
+ <div class="lucy-welcome-icon">
156
+ <img src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy">
158
157
  </div>
159
- <h3 class="font-semibold text-lg mb-2">Bonjour ! Je suis Lucy</h3>
160
- <p class="text-base-content/70 text-sm mb-4">
161
- Comment puis-je vous aider aujourd'hui ?
162
- </p>
158
+ <h3>Bonjour ! Je suis Lucy</h3>
159
+ <p>Comment puis-je vous aider aujourd'hui ?</p>
163
160
 
164
161
  {# Suggestions #}
165
- <div class="space-y-2">
162
+ <div class="lucy-suggestions">
166
163
  <template x-for="suggestion in suggestions" :key="suggestion">
167
164
  <button
168
165
  @click="sendMessage(suggestion)"
169
- class="btn btn-sm btn-outline btn-block justify-start text-left"
166
+ class="lucy-suggestion-btn"
170
167
  >
171
- <i class="fa-solid fa-lightbulb mr-2 text-warning"></i>
172
- <span x-text="suggestion" class="truncate"></span>
168
+ <i class="fa-solid fa-lightbulb"></i>
169
+ <span x-text="suggestion"></span>
173
170
  </button>
174
171
  </template>
175
172
  </div>
@@ -179,31 +176,35 @@
179
176
  {# Messages #}
180
177
  <template x-for="(msg, index) in messages" :key="msg.id || index">
181
178
  <div
182
- class="chat"
183
- :class="msg.repondant === 'UTILISATEUR' ? 'chat-end' : 'chat-start'"
179
+ class="lucy-message"
180
+ :class="msg.repondant === 'UTILISATEUR' ? 'user' : 'bot'"
184
181
  >
185
- <div class="chat-image avatar">
186
- <div class="w-8 rounded-full flex items-center justify-center overflow-hidden">
187
- <template x-if="msg.repondant === 'UTILISATEUR'">
188
- {% if lucy_assist_config.avatar_url %}
189
- <img src="{{ lucy_assist_config.avatar_url }}" alt="Utilisateur" class="w-full h-full object-cover">
190
- {% else %}
191
- <i class="fa-solid fa-user" style="font-size: 0.875rem;"></i>
192
- {% endif %}
182
+ <div class="lucy-message-avatar">
183
+ <template x-if="msg.repondant === 'UTILISATEUR'">
184
+ {% if lucy_assist_config.avatar_url %}
185
+ <img src="{{ lucy_assist_config.avatar_url }}" alt="Utilisateur">
186
+ {% else %}
187
+ <i class="fa-solid fa-user"></i>
188
+ {% endif %}
189
+ </template>
190
+ <template x-if="msg.repondant !== 'UTILISATEUR'">
191
+ <img src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy">
192
+ </template>
193
+ </div>
194
+ <div class="lucy-message-content">
195
+ <div class="lucy-message-bubble">
196
+ <template x-if="msg.contenu">
197
+ <span x-html="formatMessage(msg.contenu)"></span>
193
198
  </template>
194
- <template x-if="msg.repondant !== 'UTILISATEUR'">
195
- <img src="{% static 'lucy_assist/image/icon-lucy.png' %}" alt="Lucy" class="w-full h-full object-cover">
199
+ <template x-if="!msg.contenu">
200
+ <span class="lucy-loading-dots">
201
+ <span></span>
202
+ <span></span>
203
+ <span></span>
204
+ </span>
196
205
  </template>
197
206
  </div>
198
- </div>
199
- <div
200
- class="chat-bubble"
201
- :class="msg.repondant === 'UTILISATEUR' ? 'chat-bubble-primary' : 'chat-bubble-neutral'"
202
- x-html="msg.contenu ? formatMessage(msg.contenu) : '<span class=\'loading loading-dots loading-sm\'></span>'"
203
- >
204
- </div>
205
- <div class="chat-footer opacity-50 text-xs">
206
- <span x-text="formatTime(msg.created_date)"></span>
207
+ <div class="lucy-message-time" x-text="formatTime(msg.created_date)"></div>
207
208
  </div>
208
209
  </div>
209
210
  </template>
@@ -211,12 +212,12 @@
211
212
 
212
213
  {# Bouton Feedback - Lucy n'a pas compris #}
213
214
  <template x-if="lucyDidNotUnderstand && messages.length > 0">
214
- <div class="px-4 py-2 bg-info/10 border-t border-info/30">
215
+ <div class="lucy-feedback-bar info">
215
216
  <button
216
217
  @click="openFeedback()"
217
- class="btn btn-sm btn-info btn-outline w-full"
218
+ class="lucy-feedback-btn info"
218
219
  >
219
- <i class="fa-solid fa-headset mr-2"></i>
220
+ <i class="fa-solid fa-headset"></i>
220
221
  Contacter le chef de projet Revolucy
221
222
  </button>
222
223
  </div>
@@ -224,20 +225,20 @@
224
225
 
225
226
  {# Bouton Feedback - Erreur technique #}
226
227
  <template x-if="hasError && !lucyDidNotUnderstand && messages.length > 0">
227
- <div class="px-4 py-2 bg-warning/10 border-t border-warning/30">
228
+ <div class="lucy-feedback-bar warning">
228
229
  <button
229
230
  @click="openFeedback()"
230
- class="btn btn-sm btn-warning btn-outline w-full"
231
+ class="lucy-feedback-btn warning"
231
232
  >
232
- <i class="fa-solid fa-comment-medical mr-2"></i>
233
+ <i class="fa-solid fa-comment-medical"></i>
233
234
  Souhaites-tu que j'informe Revolucy ?
234
235
  </button>
235
236
  </div>
236
237
  </template>
237
238
 
238
239
  {# Zone de saisie #}
239
- <div class="p-4 border-t border-base-300 bg-base-100">
240
- <div class="flex gap-2 items-end">
240
+ <div class="lucy-input-area">
241
+ <div class="lucy-input-wrapper">
241
242
  <textarea
242
243
  x-model="currentMessage"
243
244
  x-ref="messageInput"
@@ -245,7 +246,7 @@
245
246
  @keydown.ctrl.enter.prevent="sendCurrentMessage()"
246
247
  @keydown.meta.enter.prevent="sendCurrentMessage()"
247
248
  placeholder="Tapez votre message..."
248
- class="textarea textarea-bordered flex-1 textarea-sm min-h-[2.5rem] max-h-32 resize-none"
249
+ class="lucy-input"
249
250
  rows="1"
250
251
  @input="$el.style.height = 'auto'; $el.style.height = Math.min($el.scrollHeight, 128) + 'px'"
251
252
  ></textarea>
@@ -253,147 +254,143 @@
253
254
  type="button"
254
255
  @click="sendCurrentMessage()"
255
256
  :disabled="isLoading || !currentMessage.trim()"
256
- class="btn btn-primary btn-sm"
257
+ class="lucy-send-btn"
257
258
  >
258
259
  <i class="fa-solid fa-paper-plane"></i>
259
260
  </button>
260
261
  </div>
261
- <p class="text-xs text-base-content/50 mt-2 text-center">
262
- Ctrl+Entrée pour envoyer
263
- </p>
262
+ <p class="lucy-input-hint">Ctrl+Entree pour envoyer</p>
264
263
  </div>
265
264
  </div>
266
265
  </template>
267
266
  </div>
268
267
  </div>
269
268
 
270
- {# Modal Achat de crédits #}
271
- <div
272
- x-show="showBuyCredits"
273
- class="modal modal-open"
274
- @keydown.escape="showBuyCredits = false"
275
- >
276
- <div class="modal-box">
277
- <h3 class="font-bold text-lg mb-4">
278
- <i class="fa-solid fa-cart-plus mr-2"></i>
279
- Acheter des crédits
280
- </h3>
269
+ {# Modal Achat de credits #}
270
+ <template x-if="showBuyCredits">
271
+ <div class="lucy-modal-overlay" @keydown.escape="showBuyCredits = false">
272
+ <div class="lucy-modal">
273
+ <div class="lucy-modal-header">
274
+ <i class="fa-solid fa-cart-plus"></i>
275
+ Acheter des credits
276
+ </div>
281
277
 
282
- <div class="form-control mb-4">
283
- <label class="label">
284
- <span class="label-text">Montant (EUR HT)</span>
285
- </label>
286
- <input
287
- type="number"
288
- x-model.number="buyAmount"
289
- min="10"
290
- step="10"
291
- class="input input-bordered"
292
- />
293
- </div>
278
+ <div class="lucy-modal-body">
279
+ <div class="lucy-form-group">
280
+ <label class="lucy-form-label">Montant (EUR HT)</label>
281
+ <input
282
+ type="number"
283
+ x-model.number="buyAmount"
284
+ min="10"
285
+ step="10"
286
+ class="lucy-form-input"
287
+ />
288
+ </div>
294
289
 
295
- <div class="bg-base-200 rounded-lg p-4 mb-4">
296
- <div class="flex justify-between mb-2">
297
- <span>Tokens à recevoir</span>
298
- <span class="font-bold" x-text="formatTokens(calculateTokens(buyAmount))"></span>
299
- </div>
300
- <div class="flex justify-between text-sm text-base-content/70">
301
- <span>Conversations estimées</span>
302
- <span x-text="Math.floor(calculateTokens(buyAmount) / 2000)"></span>
303
- </div>
304
- </div>
290
+ <div class="lucy-stats-box">
291
+ <div class="lucy-stats-row">
292
+ <span class="lucy-stats-label">Tokens a recevoir</span>
293
+ <span class="lucy-stats-value" x-text="formatTokens(calculateTokens(buyAmount))"></span>
294
+ </div>
295
+ <div class="lucy-stats-row">
296
+ <span class="lucy-stats-label">Conversations estimees</span>
297
+ <span class="lucy-stats-value" x-text="Math.floor(calculateTokens(buyAmount) / 2000)"></span>
298
+ </div>
299
+ </div>
305
300
 
306
- <div class="alert alert-info text-sm mb-4">
307
- <i class="fa-solid fa-info-circle"></i>
308
- <span>10 EUR = 1 million de tokens = ~500 conversations</span>
309
- </div>
301
+ <div class="lucy-info-box">
302
+ <i class="fa-solid fa-info-circle"></i>
303
+ <span>10 EUR = 1 million de tokens = ~500 conversations</span>
304
+ </div>
305
+ </div>
310
306
 
311
- <div class="modal-action">
312
- <button @click="showBuyCredits = false" class="btn btn-ghost">
313
- Annuler
314
- </button>
315
- <button @click="buyCredits()" class="btn btn-primary" :disabled="buyAmount < 10">
316
- <i class="fa-solid fa-credit-card mr-2"></i>
317
- Acheter
318
- </button>
307
+ <div class="lucy-modal-footer">
308
+ <button @click="showBuyCredits = false" class="lucy-btn lucy-btn-ghost">
309
+ Annuler
310
+ </button>
311
+ <button @click="buyCredits()" class="lucy-btn lucy-btn-primary" :disabled="buyAmount < 10">
312
+ <i class="fa-solid fa-credit-card"></i>
313
+ Acheter
314
+ </button>
315
+ </div>
319
316
  </div>
320
317
  </div>
321
- <div class="modal-backdrop" @click="showBuyCredits = false"></div>
322
- </div>
318
+ </template>
323
319
 
324
320
  {# Modal Feedback #}
325
- <div
326
- x-show="showFeedback"
327
- class="modal modal-open"
328
- @keydown.escape="closeFeedback()"
329
- >
330
- <div class="modal-box">
331
- <h3 class="font-bold text-lg mb-4">
332
- <i class="fa-solid fa-comment-medical mr-2 text-warning"></i>
333
- Signaler un problème
334
- </h3>
321
+ <template x-if="showFeedback">
322
+ <div class="lucy-modal-overlay" @keydown.escape="closeFeedback()">
323
+ <div class="lucy-modal">
324
+ <div class="lucy-modal-header">
325
+ <i class="fa-solid fa-comment-medical" style="color: var(--lucy-warning);"></i>
326
+ Signaler un probleme
327
+ </div>
335
328
 
336
- <div class="alert alert-info text-sm mb-4">
337
- <i class="fa-solid fa-info-circle"></i>
338
- <span>Votre conversation sera envoyée à l'équipe Revolucy pour analyse et amélioration de Lucy.</span>
339
- </div>
329
+ <div class="lucy-modal-body">
330
+ <div class="lucy-info-box">
331
+ <i class="fa-solid fa-info-circle"></i>
332
+ <span>Votre conversation sera envoyée à l'équipe Revolucy pour analyse et amélioration de Lucy Assist.</span>
333
+ </div>
340
334
 
341
- <div class="form-control mb-4">
342
- <label class="label">
343
- <span class="label-text">Description du problème (optionnel)</span>
344
- </label>
345
- <textarea
346
- x-model="feedbackDescription"
347
- class="textarea textarea-bordered h-24" style="width: 100%;margin-top: 10px;"
348
- placeholder="Décrivez ce qui n'a pas fonctionné ou ce que vous attendiez..."
349
- ></textarea>
350
- </div>
335
+ <div class="lucy-form-group">
336
+ <label class="lucy-form-label">Description du probleme (optionnel)</label>
337
+ <textarea
338
+ x-model="feedbackDescription"
339
+ class="lucy-form-textarea"
340
+ placeholder="Decrivez ce qui n'a pas fonctionne ou ce que vous attendiez..."
341
+ ></textarea>
342
+ </div>
343
+ </div>
351
344
 
352
- <div class="modal-action">
353
- <button @click="closeFeedback()" class="btn btn-ghost" :disabled="feedbackSending">
354
- Annuler
355
- </button>
356
- <button
357
- @click="sendFeedback()"
358
- class="btn btn-warning"
359
- :disabled="feedbackSending"
360
- >
361
- <span x-show="!feedbackSending">
362
- <i class="fa-solid fa-paper-plane mr-2"></i>
363
- Envoyer le feedback
364
- </span>
365
- <span x-show="feedbackSending" class="loading loading-spinner loading-sm"></span>
366
- </button>
345
+ <div class="lucy-modal-footer">
346
+ <button @click="closeFeedback()" class="lucy-btn lucy-btn-ghost" :disabled="feedbackSending">
347
+ Annuler
348
+ </button>
349
+ <button
350
+ @click="sendFeedback()"
351
+ class="lucy-btn lucy-btn-warning-solid"
352
+ :disabled="feedbackSending"
353
+ >
354
+ <template x-if="!feedbackSending">
355
+ <span>
356
+ <i class="fa-solid fa-paper-plane"></i>
357
+ Envoyer le feedback
358
+ </span>
359
+ </template>
360
+ <template x-if="feedbackSending">
361
+ <span class="lucy-spinner"></span>
362
+ </template>
363
+ </button>
364
+ </div>
367
365
  </div>
368
366
  </div>
369
- <div class="modal-backdrop" @click="closeFeedback()"></div>
370
- </div>
367
+ </template>
371
368
 
372
369
  {# Guide interactif (premier lancement) #}
373
370
  <template x-if="showGuide">
374
- <div class="fixed inset-0 z-50 bg-black/50">
371
+ <div class="lucy-guide-overlay">
375
372
  <div
376
373
  x-show="guideStep === 1"
377
- class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-base-100 rounded-xl p-6 max-w-md shadow-2xl"
374
+ class="lucy-guide-modal center"
378
375
  >
379
- <h3 class="text-xl font-bold mb-4">
380
- <i class="fa-solid fa-hand-wave text-warning mr-2"></i>
376
+ <h3 class="lucy-guide-title">
377
+ <i class="fa-solid fa-hand-wave"></i>
381
378
  Bienvenue sur Lucy Assist !
382
379
  </h3>
383
- <p class="mb-4">
384
- Je suis votre assistant intelligent. Je peux vous aider à :
380
+ <p class="lucy-guide-text">
381
+ Je suis votre assistant intelligent. Je peux vous aider a :
385
382
  </p>
386
- <ul class="list-disc list-inside mb-4 space-y-1 text-sm">
383
+ <ul class="lucy-guide-list">
387
384
  <li>Naviguer dans l'application</li>
388
385
  <li>Rechercher des informations</li>
389
- <li>Créer et modifier des éléments</li>
390
- <li>Comprendre les fonctionnalités</li>
386
+ <li>Creer et modifier des elements</li>
387
+ <li>Comprendre les fonctionnalites</li>
391
388
  </ul>
392
- <div class="flex justify-end gap-2">
393
- <button @click="skipGuide()" class="btn btn-ghost btn-sm">
389
+ <div class="lucy-guide-actions">
390
+ <button @click="skipGuide()" class="lucy-btn lucy-btn-ghost">
394
391
  Passer
395
392
  </button>
396
- <button @click="nextGuideStep()" class="btn btn-primary btn-sm">
393
+ <button @click="nextGuideStep()" class="lucy-btn lucy-btn-primary">
397
394
  Suivant
398
395
  </button>
399
396
  </div>
@@ -401,14 +398,13 @@
401
398
 
402
399
  <div
403
400
  x-show="guideStep === 2"
404
- class="absolute bottom-20 right-4 bg-base-100 rounded-xl p-4 max-w-xs shadow-2xl"
401
+ class="lucy-guide-modal bottom-right"
405
402
  >
406
- <div class="absolute -bottom-2 right-8 w-4 h-4 bg-base-100 transform rotate-45"></div>
407
- <p class="text-sm mb-3">
408
- Cliquez sur ce bouton ou utilisez <kbd class="kbd kbd-sm">Ctrl+K</kbd> pour ouvrir Lucy Assist à tout moment.
403
+ <p class="lucy-guide-text">
404
+ Cliquez sur ce bouton ou utilisez <span class="lucy-kbd">Ctrl+K</span> pour ouvrir Lucy Assist a tout moment.
409
405
  </p>
410
- <div class="flex justify-end">
411
- <button @click="finishGuide()" class="btn btn-primary btn-sm">
406
+ <div class="lucy-guide-actions">
407
+ <button @click="finishGuide()" class="lucy-btn lucy-btn-primary">
412
408
  Compris !
413
409
  </button>
414
410
  </div>