Add CSS identifiers to main sections (#2224)

* squash

* add initial ids
This commit is contained in:
pablodanswer 2024-08-23 16:59:17 -07:00 committed by GitHub
parent 6fc6ee5c37
commit 1bc899cc67
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 4 deletions

View File

@ -52,6 +52,7 @@ export const DocumentSidebar = forwardRef<HTMLDivElement, DocumentSidebarProps>(
return (
<div
id="danswer-chat-sidebar"
className={`fixed inset-0 transition-opacity duration-300 z-50 bg-black/80 ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`}
onClick={(e) => {
if (e.target === e.currentTarget) {

View File

@ -273,7 +273,7 @@ export function ChatInputBar({
};
return (
<div>
<div id="danswer-chat-input">
<div className="flex justify-center max-w-screen-lg mx-auto">
<div
className="

View File

@ -85,7 +85,10 @@ function FileDisplay({
return (
<>
{nonImgFiles && nonImgFiles.length > 0 && (
<div className={` ${alignBubble && "ml-auto"} mt-2 auto mb-4`}>
<div
id="danswer-file"
className={` ${alignBubble && "ml-auto"} mt-2 auto mb-4`}
>
<div className="flex flex-col gap-2">
{nonImgFiles.map((file) => {
return (
@ -102,7 +105,10 @@ function FileDisplay({
</div>
)}
{imageFiles && imageFiles.length > 0 && (
<div className={` ${alignBubble && "ml-auto"} mt-2 auto mb-4`}>
<div
id="danswer-image"
className={` ${alignBubble && "ml-auto"} mt-2 auto mb-4`}
>
<div className="flex flex-col gap-2">
{imageFiles.map((file) => {
return <InMessageImage key={file.id} fileId={file.id} />;
@ -268,7 +274,11 @@ export const AIMessage = ({
otherMessagesCanSwitchTo.length > 1;
return (
<div ref={trackedElementRef} className={"py-5 px-2 lg:px-5 relative flex "}>
<div
id="danswer-ai-message"
ref={trackedElementRef}
className={"py-5 px-2 lg:px-5 relative flex "}
>
<div
className={`mx-auto ${shared ? "w-full" : "w-[90%]"} max-w-message-max`}
>
@ -717,6 +727,7 @@ export const HumanMessage = ({
return (
<div
id="danswer-human-message"
className="pt-5 pb-1 px-2 lg:px-5 flex -mr-6 relative"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}