Skip to content

Commit f43684f

Browse files
splitbrainsplitbrain
committed
add send button
Some people said they're not clear how to send messages, so a button was added. Pressing Enter still works. The entry was changed to a textarea making longer questions easier. Shift-Enter can be used to add line breaks. All button titles are now translatable.
1 parent 354f5fa commit f43684f

File tree

5 files changed

+59
-10
lines changed

5 files changed

+59
-10
lines changed

‎lang/de/lang.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,8 @@
77

88
$lang['title'] = 'KI Chat';
99
$lang['placeholder'] = 'Ihre Frage…';
10+
$lang['restricted'] = 'Entschuldigung, der KI-Chat wurde für Sie nicht aktiviert.';
11+
$lang['send-button'] = 'Frage senden [Enter]';
12+
$lang['restart-button'] = 'Gespräch neu starten';
13+
$lang['close-button'] = 'Schließen';
14+
$lang['fullscreen-button'] = 'Vollbild umschalten';

‎lang/en/lang.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@
88
$lang['title'] = 'AI Chat';
99
$lang['placeholder'] = 'Your question…';
1010
$lang['restricted'] = 'Sorry, the AI chat has not been enabled for you.';
11+
$lang['send-button'] = 'Send your question [Enter]';
12+
$lang['restart-button'] = 'Restart the conversation';
13+
$lang['close-button'] = 'Close';
14+
$lang['fullscreen-button'] = 'Toggle fullscreen';

‎script/AIChatButton.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ class AIChatButton extends HTMLElement {
1313
<dialog>
1414
<div>
1515
<header>
16-
<button class="fs" title="Fullscreen">
16+
<button class="fs" title="fullscreen">
1717
<svg viewBox="0 0 24 24"><path d="M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z" /></svg>
1818
</button>
1919
<h1>AI Chat</h1>
20-
<button class="toggle" title="Close">
20+
<button class="toggle" title="close">
2121
<svg viewBox="0 0 24 24"><path d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" /></svg>
2222
</button>
2323
</header>
@@ -49,6 +49,11 @@ class AIChatButton extends HTMLElement {
4949
connectedCallback() {
5050
this.#root.querySelector('button.start').title = this.getAttribute('label') || 'AI Chat';
5151
this.#dialog.querySelector('header h1').textContent = this.getAttribute('label') || 'AI Chat';
52+
53+
// make title attributes translatable
54+
for (const elem of this.#root.querySelectorAll('[title]')) {
55+
elem.title = this.getAttribute('title-'+elem.title) || elem.title;
56+
}
5257
}
5358

5459
/**

‎script/AIChatChat.js‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,31 @@ class AIChatChat extends HTMLElement {
1515
<form>
1616
<progress max="100" value="0"></progress>
1717
<div class="controls">
18-
<button type="button" class="delete-history" title="Restart Conversation">
18+
<button type="button" class="delete-history" title="restart">
1919
<svg viewBox="0 0 24 24"><path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" /></svg>
2020
</button>
21-
<input type="text" autofocus />
21+
<textarea autofocus></textarea>
22+
<button type="submit" class="send" title="send">
23+
<svg viewBox="0 0 24 24"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" /></svg>
24+
</button>
2225
</div>
2326
</form>
2427
`;
2528
this.#root.appendChild(this.getStyle());
26-
this.#input = this.#root.querySelector('input');
29+
this.#input = this.#root.querySelector('textarea');
2730
this.#output = this.#root.querySelector('.output');
2831
this.#progress = this.#root.querySelector('progress');
2932
this.#controls = this.#root.querySelector('.controls');
3033
const form = this.#root.querySelector('form');
3134
form.addEventListener('submit', this.onSubmit.bind(this));
3235
const restart = this.#root.querySelector('.delete-history');
3336
restart.addEventListener('click', this.deleteHistory.bind(this));
37+
this.#input.addEventListener('keydown', (event) => {
38+
if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
39+
event.preventDefault();
40+
form.dispatchEvent(new Event('submit'));
41+
}
42+
});
3443
}
3544

3645
/**
@@ -41,6 +50,12 @@ class AIChatChat extends HTMLElement {
4150
connectedCallback() {
4251
this.#input.placeholder = this.getAttribute('placeholder') || 'Your question...';
4352
this.displayMessage(this.getAttribute('hello') || 'Hello, how can I help you?', {});
53+
54+
// make title attributes translatable
55+
for (const elem of this.#root.querySelectorAll('[title]')) {
56+
elem.title = this.getAttribute('title-'+elem.title) || elem.title;
57+
}
58+
4459
this.restoreHistory();
4560
this.stopProgress(); // initializes the visibility states
4661
}
@@ -73,26 +88,42 @@ class AIChatChat extends HTMLElement {
7388
margin-bottom: 1em;
7489
}
7590
.controls {
76-
display: flex;
7791
width: 100%;
92+
position: relative;
7893
}
7994
.controls button {
8095
padding: 0;
8196
background: none;
8297
border: none;
8398
cursor: pointer;
8499
display: flex;
85-
width: 3em;
100+
width: 2.5em;
101+
102+
position: absolute;
103+
bottom: 2px;
104+
z-index: 1;
105+
}
106+
.controls button.delete-history {
107+
left: 5px;
108+
}
109+
.controls button.send {
110+
right: 5px;
86111
}
87112
.controls button svg {
88113
flex-grow: 1;
89114
flex-shrink: 1;
90115
fill: var(--color-link);
91116
}
92-
.controls input {
93-
flex-grow: 1;
94-
padding: 0.25em;
117+
.controls textarea {
118+
width: 100%;
119+
padding: 0.25em 3em;
95120
font-size: 1.2em;
121+
height: 4em;
122+
border: none;
123+
resize: vertical;
124+
}
125+
.controls textarea:focus {
126+
outline: none;
96127
}
97128
progress{
98129
width: 100%;

‎syntax/chat.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,16 @@ public function render($format, Doku_Renderer $renderer, $data)
6262
'hello' => trim((string) $data['body']),
6363
'placeholder' => $this->getLang('placeholder'),
6464
'url' => DOKU_BASE . 'lib/exe/ajax.php?call=aichat',
65+
'title-send' => $this->getLang('send-button'),
66+
'title-restart' => $this->getLang('restart-button'),
6567
];
6668
$html = '<aichat-chat ' . buildAttributes($opts) . '></aichat-chat>';
6769

6870
if (in_array('button', $data['params'])) {
6971
$opts = [
7072
'label' => $this->getLang('title'),
73+
'title-close' => $this->getLang('close-button'),
74+
'title-fullscreen' => $this->getLang('fullscreen-button'),
7175
];
7276
if (in_array('float', $data['params'])) $opts['class'] = 'float';
7377

0 commit comments

Comments
 (0)