Skip to content

Features/refine chat window #110

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
Apr 11, 2024
Merged

Features/refine chat window #110

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
9e8a3c1
refine auto scroll
Apr 11, 2024
737d95b
Merge branch 'main' of https://github.com/SciSharp/BotSharp-UI into f…
Apr 11, 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
15 changes: 12 additions & 3 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 @@ -226,6 +226,7 @@
button {
min-width: 50px;
text-align: left;
border-radius: 10px;
}
}

Expand All @@ -236,20 +237,27 @@
margin-top: 10px;

.card-element {
flex: 1 1 fit-content;
flex: 1 1 50%;
border-radius: 10px;
border-width: 2px;
max-width: 45%;
margin-bottom: 0px;

@media (max-width: 620px) {
width: 100%;
max-width: 100%;
}

.card-element-title {
font-size: 1.1rem;
font-size: 0.8rem;
font-weight: 700;
height: 30%;
}

.card-element-subtitle {
font-size: 0.8rem;
font-size: 0.7rem;
font-weight: 500;
height: 8%;
}

.card-option-group {
Expand All @@ -259,6 +267,7 @@
display: block;
margin-left: 0px !important;
text-align: left;
border-radius: 10px;
}
}
}
Expand Down
7 changes: 6 additions & 1 deletion 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 @@ -217,14 +217,18 @@
groupedDialogs = groupDialogs(dialogs);
await tick();

autoScrollToBottom();
}

function autoScrollToBottom() {
// @ts-ignore
scrollbars.forEach(scrollbar => {
setTimeout(() => {
const { viewport } = scrollbar.elements();
viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
}, 200);
});
}
}

/** @param {import('$types').ChatResponseModel[]} dialogs */
function groupDialogs(dialogs) {
Expand Down Expand Up @@ -901,6 +905,7 @@
message={message}
displayExtraElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
disableOption={isSendingMsg || isThinking}
refresh={autoScrollToBottom}
onConfirm={confirmSelectedOption}
/>
<ChatAttachment
Expand Down
14 changes: 8 additions & 6 deletions src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { Card, CardBody } from "@sveltestrap/sveltestrap";
import { onMount } from "svelte";


/** @type {boolean} */
export let disableOption = false;

Expand All @@ -12,16 +11,21 @@
/** @type {(args0: string, args1: string) => any} */
export let onConfirm;

/** @type {() => any} */
export let refresh = () => {};

/** @type {any[]} */
let cards = [];

onMount(() => {
cards = collectOptions(options);
reset();
collectOptions(options);
refresh && refresh();
});

/** @param {any[]} options */
function collectOptions(options) {
const res = options?.map(op => {
cards = options?.map(op => {
// @ts-ignore
const options = op.buttons?.filter(op => !!op.title && !!op.payload)?.map(x => {
return {
Expand All @@ -36,8 +40,6 @@
options: options
};
}) || [];

return res;
}

/**
Expand Down Expand Up @@ -78,7 +80,7 @@
<div class="card-option-group">
{#each card.options as option, i (i)}
<button
class="btn btn-outline-primary btn-rounded btn-sm m-1"
class="btn btn-outline-primary btn-sm m-1"
disabled={disableOption}
on:click={(e) => handleClickOption(e, option)}
>
Expand Down
8 changes: 6 additions & 2 deletions src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
/** @type {(args0: string, args1: string) => any} */
export let onConfirm;

/** @type {() => any} */
export let refresh = () => {};

/** @type {string} */
export let confirmBtnText = 'Continue';

Expand All @@ -33,6 +36,7 @@
onMount(() => {
reset();
collectOptions(options);
refresh && refresh();
});

/** @param {any[]} options */
Expand Down Expand Up @@ -130,7 +134,7 @@
<div class="button-group-container">
{#each plainOptions as option, index}
<button
class={`btn btn-rounded btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
class:active={!!option.isClicked}
disabled={disableOption}
on:click={(e) => handleClickOption(e, option, index)}
Expand All @@ -140,7 +144,7 @@
{/each}
{#if isMultiSelect}
<button
class="btn btn-outline-success btn-rounded btn-sm m-1"
class="btn btn-outline-success btn-sm m-1"
name="confirm"
disabled={disableOption || plainOptions.every(x => !!!x.isClicked)}
on:click={(e) => handleConfirm(e)}
Expand Down
13 changes: 8 additions & 5 deletions src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
/** @type {(args0: string, args1: string) => any} */
export let onConfirm = () => {};

/** @type {() => any} */
export let refresh = () => {};

/** @type {boolean} */
let isComplexElement = false;

Expand Down Expand Up @@ -43,16 +46,16 @@

{#if displayExtraElements}
{#if message?.rich_content?.message?.rich_type === RichType.QuickReply}
<RcPlainOptions options={message?.rich_content?.message?.quick_replies} disableOption={disableOption} onConfirm={handleConfirm} />
<RcPlainOptions options={message?.rich_content?.message?.quick_replies} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
{:else if message?.rich_content?.message?.rich_type === RichType.Button}
<RcPlainOptions options={message?.rich_content?.message?.buttons} disableOption={disableOption} onConfirm={handleConfirm} />
<RcPlainOptions options={message?.rich_content?.message?.buttons} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
{:else if message?.rich_content?.message?.rich_type === RichType.MultiSelect}
<RcPlainOptions options={message?.rich_content?.message?.options} isMultiSelect disableOption={disableOption} onConfirm={handleConfirm} />
<RcPlainOptions options={message?.rich_content?.message?.options} isMultiSelect disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
{:else if message?.rich_content?.message?.rich_type === RichType.Generic}
{#if isComplexElement}
<RcComplexOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} />
<RcComplexOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
{:else}
<RcPlainOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} />
<RcPlainOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
{/if}
{/if}
{/if}