Skip to content

refine chat uploader #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 9, 2024
Merged

refine chat uploader #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07bf30b
refine chat uploader
May 9, 2024
3c6030d
add user name
May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/lib/scss/custom/pages/_chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,16 +304,20 @@
padding-right: 1rem;
}

.chat-uploader {
padding-right: 3em;
}

// obsolete
.chat-input-links {
position: absolute;
right: 3px;
top: 50%;
top: 55%;
transform: translateY(-50%);
width: 3em;
li {
span {
font-size: 16px;
font-size: 160% !important;
line-height: 36px;
padding: 0px 4px;
display: inline-block;
Expand Down
69 changes: 35 additions & 34 deletions src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -871,7 +871,7 @@
<div class="col-md-4 col-7 head-left">
<div class="m-1">{agent?.name}</div>
<div class="text-muted mb-0">
<i class="mdi mdi-circle text-success align-middle me-1" /> Active now
<i class="mdi mdi-circle text-success align-middle me-1" /> {currentUser?.user_name || ''}
</div>
</div>

Expand Down Expand Up @@ -1042,41 +1042,42 @@

<div class={`chat-input-section css-animation ${!loadEditor ? 'chat-input-hide' : 'fade-in-from-none'}`}>
<div class="row">
{#if loadTextEditor}
<div class="col-auto">
<button
type="submit"
class="btn btn-primary btn-rounded waves-effect waves-light"
<div class="col-auto">
<button
type="submit"
class="btn btn-primary btn-rounded waves-effect waves-light"
disabled={isSendingMsg || isThinking}
on:click={startListen}
>
<i class="mdi mdi-{microphoneIcon} md-36" />
</button>
</div>
<div class="col">
<div class="position-relative">
<ChatTextArea
className={`chat-input ${loadFileEditor ? 'chat-uploader' : ''}`}
bind:text={text}
disabled={isSendingMsg || isThinking}
on:click={startListen}
>
<i class="mdi mdi-{microphoneIcon} md-36" />
</button>
</div>
<div class="col">
<div class="position-relative">
<ChatTextArea
className={`chat-input`}
bind:text={text}
disabled={isSendingMsg || isThinking}
editor={lastBotMsg?.rich_content?.editor || ''}
onKeyDown={e => onSendMessage(e)}
/>
</div>
</div>
<div class="col-auto">
<button
type="submit"
class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
disabled={!!!_.trim(text) || isSendingMsg || isThinking}
on:click={() => sentTextMessage()}
><span class="d-none d-md-inline-block me-2">Send</span>
<i class="mdi mdi-send" />
</button>
editor={lastBotMsg?.rich_content?.editor || ''}
onKeyDown={e => onSendMessage(e)}
/>
{#if loadFileEditor}
<div class="chat-input-links">
<ChatImageUploader />
</div>
{/if}
</div>
{:else if loadFileEditor}
<ChatImageUploader />
{/if}
</div>
<div class="col-auto">
<button
type="submit"
class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
disabled={!!!_.trim(text) || isSendingMsg || isThinking}
on:click={() => sentTextMessage()}
><span class="d-none d-md-inline-block me-2">Send</span>
<i class="mdi mdi-send" />
</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/chat/[agentId]/[conversationId]/chatImage/chat-image-uploader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
fileLimit={fileUploadLimit}
on:drop={e => handleFileDrop(e)}
>
<span><i class="mdi mdi-file-document-outline" /></span>
<span><i class="bx bx-image-add" /></span>
</FileDropZone>
</li>
</ul>
Expand Down