Skip to content

feat: added some class helpers, so that customCSS selectors are simpler to write. #344

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

Open
carliblaz wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: added some class helpers, so that customCSS selectors are simpler to write. #344

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f65538f
feat: added some class helpers, so that customCSS selectors are simpl…
Jan 8, 2026
0894a73
fix: typos
Jan 8, 2026
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
2 changes: 1 addition & 1 deletion dist/web.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/web.umd.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const Badge = (props: Props) => {
<>
<Show when={props.footer?.showFooter === undefined || props.footer?.showFooter === null || props.footer?.showFooter === true}>
<span
class="w-full text-center px-[10px] pt-[6px] pb-[10px] m-auto text-[13px]"
class="poweredby w-full text-center px-[10px] pt-[6px] pb-[10px] m-auto text-[13px]"
style={{
color: props.footer?.textColor ?? props.poweredByTextColor ?? defaultTextColor,
'background-color': props.badgeBackgroundColor ?? '#ffffff',
Expand Down
14 changes: 7 additions & 7 deletions src/components/Bot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ const FeedbackDialog = (props: {
return (
<Show when={props.isOpen}>
<div class="fixed inset-0 rounded-lg flex items-center justify-center backdrop-blur-sm z-50" style={{ background: 'rgba(0, 0, 0, 0.4)' }}>
<div class="p-6 rounded-lg shadow-lg max-w-md w-full text-center mx-4 font-sans" style={{ background: 'white', color: 'black' }}>
<div class="feedback p-6 rounded-lg shadow-lg max-w-md w-full text-center mx-4 font-sans" style={{ background: 'white', color: 'black' }}>
<h2 class="text-xl font-semibold mb-4 flex justify-center items-center">Your Feedback</h2>

<textarea
Expand Down Expand Up @@ -2393,7 +2393,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {

{props.showTitle ? (
<div
class="flex flex-row items-center w-full h-[50px] absolute top-0 left-0 z-10"
class="titlewraper flex flex-row items-center w-full h-[50px] absolute top-0 left-0 z-10"
Comment thread
carliblaz marked this conversation as resolved.
Outdated
style={{
background: props.titleBackgroundColor || props.bubbleBackgroundColor || defaultTitleBackgroundColor,
color: props.titleTextColor || props.bubbleTextColor || defaultBackgroundColor,
Expand Down Expand Up @@ -2422,10 +2422,10 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
</DeleteButton>
</div>
) : null}
<div class="flex flex-col w-full h-full justify-start z-0">
<div class="innerwindow flex flex-col w-full h-full justify-start z-0">
<div
ref={chatContainer}
class="overflow-y-scroll flex flex-col flex-grow min-w-full w-full px-3 pt-[70px] relative scrollable-container chatbot-chat-view scroll-smooth"
class="messages overflow-y-scroll flex flex-col flex-grow min-w-full w-full px-3 pt-[70px] relative scrollable-container chatbot-chat-view scroll-smooth"
>
<For each={[...messages()]}>
{(message, index) => {
Expand Down Expand Up @@ -2503,7 +2503,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
</div>
<Show when={messages().length === 1}>
<Show when={starterPrompts().length > 0}>
<div class="w-full flex flex-row flex-wrap px-5 py-[10px] gap-2">
<div class="recomedations w-full flex flex-row flex-wrap px-5 py-[10px] gap-2">
Comment thread
carliblaz marked this conversation as resolved.
Outdated
<For each={[...starterPrompts()]}>
{(key) => (
<StarterPromptBubble
Expand All @@ -2523,7 +2523,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
<SparklesIcon class="w-4 h-4" />
<span class="text-sm text-gray-700">Try these prompts</span>
</div>
<div class="w-full flex flex-row flex-wrap px-5 py-[10px] gap-2">
<div class="tryout w-full flex flex-row flex-wrap px-5 py-[10px] gap-2">
<For each={[...followUpPrompts()]}>
{(prompt, index) => (
<FollowUpPromptBubble
Expand All @@ -2542,7 +2542,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
<For each={[...previews()]}>{(item) => <>{previewDisplay(item)}</>}</For>
</div>
</Show>
<div class="w-full px-5 pt-2 pb-1">
<div class="userinput w-full px-5 pt-2 pb-1">
{isRecording() ? (
<>
{recordingNotSupported() ? (
Expand Down
4 changes: 2 additions & 2 deletions src/components/bubbles/StarterPromptBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ export const StarterPromptBubble = (props: Props) => (
<div
data-modal-target="defaultModal"
data-modal-toggle="defaultModal"
class="flex justify-start items-start animate-fade-in host-container hover:brightness-90 active:brightness-75"
class="prompt flex justify-start items-start animate-fade-in host-container hover:brightness-90 active:brightness-75"
onClick={() => props.onPromptClick?.()}
>
<span
class="px-2 py-1 ml-1 whitespace-pre-wrap max-w-full chatbot-host-bubble"
class="prompttext px-2 py-1 ml-1 whitespace-pre-wrap max-w-full chatbot-host-bubble"
data-testid="host-bubble"
style={{
width: 'max-content',
Expand Down
2 changes: 1 addition & 1 deletion src/components/buttons/SendButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const DeleteButton = (props: SendButtonProps) => {
disabled={props.isDisabled || props.isLoading}
{...props}
class={
`py-2 ${paddingClass} justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 chatbot-button ` +
`resetbutton py-2 ${paddingClass} justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 chatbot-button ` +
props.class
}
style={{ background: 'transparent', border: 'none' }}
Expand Down
4 changes: 2 additions & 2 deletions src/features/bubble/components/Bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const Bubble = (props: BubbleProps) => {
right: `${Math.max(0, Math.min(buttonPosition().right, window.innerWidth - (bubbleProps.theme?.chatWindow?.width ?? 410) - 10))}px`,
}}
class={
`fixed sm:right-5 rounded-lg w-full sm:w-[400px] max-h-[704px]` +
`botwindow fixed sm:right-5 rounded-lg w-full sm:w-[400px] max-h-[704px]` +
(isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') +
` bottom-${chatWindowBottom}px`
}
Expand All @@ -111,7 +111,7 @@ export const Bubble = (props: BubbleProps) => {
{/* Cross button For only mobile screen use this <Show when={isBotOpened() && window.innerWidth <= 640}> */}
<button
onClick={closeBot}
class="py-2 pr-3 absolute top-0 right-[-8px] m-[6px] bg-transparent text-white rounded-full z-50 disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75"
class="closebutton py-2 pr-3 absolute top-0 right-[-8px] m-[6px] bg-transparent text-white rounded-full z-50 disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75"
title="Close Chat"
>
<svg viewBox="0 0 24 24" width="24" height="24">
Expand Down
2 changes: 1 addition & 1 deletion src/features/bubble/components/BubbleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const BubbleButton = (props: Props) => {
part="button"
onClick={handleButtonClick}
onMouseDown={onMouseDown}
class={`fixed shadow-md rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in`}
class={`botbutton fixed shadow-md rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in`}
style={{
'background-color': props.backgroundColor ?? defaultButtonColor,
'z-index': 42424242,
Expand Down