Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b58274b

Browse files
mudlermudler
authored
feat(ui): support multilineand style ul (mudler#2226)
* feat(ui/chat): handle multiline in the input field Signed-off-by: mudler <[email protected]> * feat(ui/chat): correctly display multiline messages Signed-off-by: mudler <[email protected]> * feat(ui/chat): add list style Signed-off-by: mudler <[email protected]> --------- Signed-off-by: mudler <[email protected]>
1 parent a31d00d commit b58274b

3 files changed

Lines changed: 50 additions & 21 deletions

File tree

‎core/http/static/chat.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,7 @@ function submitPrompt(event) {
4040
document.getElementById("input").value = "";
4141
const key = localStorage.getItem("key");
4242

43-
if (input.startsWith("!img")) {
44-
promptDallE(key, input.slice(4));
45-
} else {
46-
promptGPT(key, input);
47-
}
43+
promptGPT(key, input);
4844
}
4945

5046

‎core/http/static/general.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,23 @@ body {
7171
flex-grow: 1;
7272
margin: 0.5rem;
7373
}
74+
75+
ul {
76+
list-style-type: disc; /* Adds bullet points */
77+
padding-left: 1.25rem; /* Indents the list from the left margin */
78+
margin-top: 1rem; /* Space above the list */
79+
}
80+
81+
li {
82+
font-size: 0.875rem; /* Small text size */
83+
color: #4a5568; /* Dark gray text */
84+
background-color: #f7fafc; /* Very light gray background */
85+
border-radius: 0.375rem; /* Rounded corners */
86+
padding: 0.5rem; /* Padding inside each list item */
87+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Subtle shadow */
88+
margin-bottom: 0.5rem; /* Vertical space between list items */
89+
}
90+
91+
li:last-child {
92+
margin-bottom: 0; /* Removes bottom margin from the last item */
93+
}

‎core/http/views/chat.html‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ <h1 class="text-lg font-semibold"> <i class="fa-solid fa-comments"></i> Chat wit
106106
<div class="flex flex-col flex-1">
107107
<span class="text-xs font-semibold text-gray-600" x-text="message.role === 'user' ? 'User' : 'Assistant ({{.Model}})'"></span>
108108
<template x-if="message.role === 'user'">
109-
<div class="p-2 flex-1 rounded" :class="message.role" x-text="message.content"></div>
109+
<div class="p-2 flex-1 rounded" :class="message.role" x-html="message.html"></div>
110110
</template>
111111
<template x-if="message.role === 'assistant'">
112112
<div class="p-2 flex-1 rounded" :class="message.role" x-html="message.html"></div>
@@ -117,22 +117,27 @@ <h1 class="text-lg font-semibold"> <i class="fa-solid fa-comments"></i> Chat wit
117117
</div>
118118
</div>
119119

120-
<div class="p-4 border-t border-gray-700">
121-
<div id="loader" class="my-2 loader" style="display: none;" ></div>
120+
<div class="p-4 border-t border-gray-700" x-data="{ inputValue: '', shiftPressed: false }">
121+
<div id="loader" class="my-2 loader" style="display: none;"></div>
122122
<input id="chat-model" type="hidden" value="{{.Model}}">
123-
<form id="prompt" action="/chat/{{.Model}}" method="get">
124-
<input
125-
type="text"
126-
id="input"
127-
name="input"
128-
placeholder="Prompt…"
129-
autocomplete="off"
130-
class="p-2 border rounded w-full bg-gray-600 text-white placeholder-gray-300"
131-
required
132-
/>
123+
<form id="prompt" action="/chat/{{.Model}}" method="get" @submit.prevent="submitPrompt">
124+
<div class="relative w-full">
125+
<textarea
126+
id="input"
127+
name="input"
128+
x-model="inputValue"
129+
placeholder="Send a message..."
130+
class="p-2 pl-2 border rounded w-full bg-gray-600 text-white placeholder-gray-300"
131+
required
132+
@keydown.shift="shiftPressed = true"
133+
@keyup.shift="shiftPressed = false"
134+
@keydown.enter="if (!shiftPressed) { submitPrompt($event); }"
135+
style="padding-right: 4rem;"
136+
></textarea>
137+
<button type=submit><i class="fa-solid fa-circle-up text-gray-300 absolute right-2 top-3 text-lg p-2 ml-2"></i></button>
138+
</div>
133139
</form>
134-
</div>
135-
140+
</div>
136141
<script>
137142
document.addEventListener("alpine:init", () => {
138143
Alpine.store("chat", {
@@ -150,10 +155,18 @@ <h1 class="text-lg font-semibold"> <i class="fa-solid fa-comments"></i> Chat wit
150155
marked.parse(this.history[N].content),
151156
);
152157
} else {
158+
c = ""
159+
// split content newlines in content
160+
const lines = content.split("\n");
161+
// for each line, do DOMPurify.sanitize(marked.parse(line)) and add it to c
162+
lines.forEach((line) => {
163+
c += DOMPurify.sanitize(marked.parse(line));
164+
});
165+
153166
this.history.push({
154167
role: role,
155168
content: content,
156-
html: DOMPurify.sanitize(marked.parse(content)),
169+
html: c,
157170
});
158171
}
159172

0 commit comments

Comments
 (0)