Skip to content

Commit

Permalink
update chat display
Browse files Browse the repository at this point in the history
  • Loading branch information
@pablonyx
pablonyx committed Dec 17, 2024
1 parent 9712b0d commit 0691a92
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 43 deletions.
5 changes: 1 addition & 4 deletions backend/onyx/server/query_and_chat/chat_backend.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,7 @@ def get_chat_session(
persona_name=chat_session.persona.name if chat_session.persona else None,
current_alternate_model=chat_session.current_alternate_model,
messages=[
translate_db_message_to_chat_message_detail(
msg, remove_doc_content=is_shared # if shared, don't leak doc content
)
for msg in session_messages
translate_db_message_to_chat_message_detail(msg) for msg in session_messages
],
time_created=chat_session.time_created,
shared_status=chat_session.shared_status,
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/chat/ChatPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2105,6 +2105,7 @@ export function ChatPage({
}
/>
)}

{sharingModalVisible && chatSessionIdRef.current !== null && (
<ShareChatSessionModal
message={message}
Expand Down Expand Up @@ -2168,7 +2169,6 @@ export function ChatPage({
fixed
right-0
z-[1000]
bg-background
h-screen
transition-all
Expand Down
4 changes: 3 additions & 1 deletion web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,9 @@ export function ChatDocumentDisplay({
};

return (
<div className={`opacity-100 ${modal ? "w-[90vw]" : "w-full"}`}>
<div
className={`max-w-[400px] opacity-100 ${modal ? "w-[90vw]" : "w-full"}`}
>
<div
className={`flex relative flex-col gap-0.5 rounded-xl mx-2 my-1 ${
isSelected ? "bg-gray-200" : "hover:bg-background-125"
Expand Down
5 changes: 3 additions & 2 deletions web/src/app/chat/documentSidebar/ChatFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { SourceSelector } from "../shared_chat_search/SearchFilters";
import { XIcon } from "@/components/icons/icons";

interface ChatFiltersProps {
filterManager: FilterManager;
filterManager?: FilterManager;
closeSidebar: () => void;
selectedMessage: Message | null;
selectedDocuments: OnyxDocument[] | null;
Expand Down Expand Up @@ -79,6 +79,7 @@ export const ChatFilters = forwardRef<HTMLDivElement, ChatFiltersProps>(
const dedupedDocuments = removeDuplicateDocs(currentDocuments || []);

const tokenLimitReached = selectedDocumentTokens > maxTokens - 75;
console.log("SELECTED MESSAGE is", selectedMessage);

const hasSelectedDocuments = selectedDocumentIds.length > 0;

Expand Down Expand Up @@ -122,10 +123,10 @@ export const ChatFilters = forwardRef<HTMLDivElement, ChatFiltersProps>(
<div className="overflow-y-auto -mx-1 sm:mx-0 flex-grow gap-y-0 default-scrollbar dark-scrollbar flex flex-col">
{showFilters ? (
<SourceSelector
{...filterManager!}
modal={modal}
tagsOnLeft={true}
filtersUntoggled={false}
{...filterManager}
availableDocumentSets={documentSets}
existingSources={ccPairs.map((ccPair) => ccPair.source)}
availableTags={tags}
Expand Down
25 changes: 10 additions & 15 deletions web/src/app/chat/message/Messages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,21 +393,16 @@ export const AIMessage = ({
<div className="max-w-message-max break-words">
{!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME ? (
<>
{query !== undefined &&
handleShowRetrieved &&
!retrievalDisabled && (
<div className="mb-1">
<SearchSummary
index={index || 0}
query={query}
finished={toolCall?.tool_result != undefined}
hasDocs={hasDocs || false}
messageId={messageId}
handleShowRetrieved={handleShowRetrieved}
handleSearchQueryEdit={handleSearchQueryEdit}
/>
</div>
)}
{query !== undefined && !retrievalDisabled && (
<div className="mb-1">
<SearchSummary
index={index || 0}
query={query}
finished={toolCall?.tool_result != undefined}
handleSearchQueryEdit={handleSearchQueryEdit}
/>
</div>
)}
{handleForceSearch &&
content &&
query === undefined &&
Expand Down
6 changes: 0 additions & 6 deletions web/src/app/chat/message/SearchSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,12 @@ export function ShowHideDocsButton({
export function SearchSummary({
index,
query,
hasDocs,
finished,
messageId,
handleShowRetrieved,
handleSearchQueryEdit,
}: {
index: number;
finished: boolean;
query: string;
hasDocs: boolean;
messageId: number | null;
handleShowRetrieved: (messageId: number | null) => void;
handleSearchQueryEdit?: (query: string) => void;
}) {
const [isEditing, setIsEditing] = useState(false);
Expand Down
168 changes: 165 additions & 3 deletions web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { BackendChatSession } from "../../interfaces";
import {
buildLatestMessageChain,
getCitedDocumentsFromMessage,
getHumanAndAIMessageFromMessageNumber,
processRawChatHistory,
} from "../../lib";
import { AIMessage, HumanMessage } from "../../message/Messages";
Expand All @@ -19,6 +20,12 @@ import { Persona } from "@/app/admin/assistants/interfaces";
import { Button } from "@/components/ui/button";
import { OnyxDocument } from "@/lib/search/interfaces";
import TextView from "@/components/chat_search/TextView";
import { ChatFilters } from "../../documentSidebar/ChatFilters";
import { Modal } from "@/components/Modal";
import FunctionalHeader from "@/components/chat_search/Header";
import { MinimalMarkdown } from "@/components/chat_search/MinimalMarkdown";
import FixedLogo from "../../shared_chat_search/FixedLogo";
import { useDocumentSelection } from "../../useDocumentSelection";

function BackToOnyxButton() {
const router = useRouter();
Expand All @@ -42,10 +49,18 @@ export function SharedChatDisplay({
chatSession: BackendChatSession | null;
persona: Persona;
}) {
const settings = useContext(SettingsContext);
const [documentSidebarToggled, setDocumentSidebarToggled] = useState(false);
const [selectedMessageForDocDisplay, setSelectedMessageForDocDisplay] =
useState<number | null>(null);
const [isReady, setIsReady] = useState(false);
const [presentingDocument, setPresentingDocument] =
useState<OnyxDocument | null>(null);

const toggleDocumentSidebar = () => {
setDocumentSidebarToggled(!documentSidebarToggled);
};

useEffect(() => {
Prism.highlightAll();
setIsReady(true);
Expand All @@ -62,11 +77,31 @@ export function SharedChatDisplay({
</div>
);
}
const [
selectedDocuments,
toggleDocumentSelection,
clearSelectedDocuments,
selectedDocumentTokens,
] = useDocumentSelection();

const messages = buildLatestMessageChain(
processRawChatHistory(chatSession.messages)
);

const messagesWithDocuments = messages.map((message) => ({
...message,
documents: message.documents || [],
}));

useEffect(() => {
messagesWithDocuments.forEach((message) => {
console.log(
`Message ID ${message.messageId} documents:`,
message.documents
);
});
}, []);
console.log("selectedDocuments", selectedDocuments);
return (
<>
{presentingDocument && (
Expand All @@ -75,8 +110,96 @@ export function SharedChatDisplay({
onClose={() => setPresentingDocument(null)}
/>
)}
<div className="w-full h-[100dvh] overflow-hidden">
<div className="flex max-h-full overflow-hidden pb-[72px]">
{documentSidebarToggled && settings?.isMobile && (
<div className="md:hidden">
<Modal noPadding noScroll>
<ChatFilters
selectedMessage={null}
toggleDocumentSelection={() => {
setDocumentSidebarToggled(true);
}}
clearSelectedDocuments={() => {}}
selectedDocumentTokens={0}
maxTokens={0}
initialWidth={400}
isOpen={true}
setPresentingDocument={setPresentingDocument}
modal={true}
ccPairs={[]}
tags={[]}
documentSets={[]}
showFilters={false}
closeSidebar={() => {
setDocumentSidebarToggled(false);
}}
selectedDocuments={[]}
/>
</Modal>
</div>
)}
<div className="px-2">
<div className="w-full h-[100dvh] flex flex-col overflow-hidden">
<div className="flex max-h-full overflow-hidden pb-[72px]">
<FunctionalHeader
sidebarToggled={false}
toggleSidebar={() => {}}
page="chat"
reset={() => {}}
/>
</div>
{!settings?.isMobile && (
<div
style={{ transition: "width 0.30s ease-out" }}
className={`
flex-none
fixed
right-0
z-[1000]
bg-background-100
h-screen
transition-all
bg-opacity-8
duration-300
ease-in-out
transition-all
bg-opacity-100
duration-300
ease-in-out
h-full
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
`}
>
<ChatFilters
selectedMessage={
selectedMessageForDocDisplay
? messages.find(
(message) =>
message.messageId === selectedMessageForDocDisplay
) || null
: null
}
toggleDocumentSelection={() => {
setDocumentSidebarToggled(true);
}}
clearSelectedDocuments={() => {}}
selectedDocumentTokens={0}
maxTokens={0}
initialWidth={400}
isOpen={true}
setPresentingDocument={setPresentingDocument}
modal={true}
ccPairs={[]}
tags={[]}
documentSets={[]}
showFilters={false}
closeSidebar={() => {
setDocumentSidebarToggled(false);
}}
selectedDocuments={selectedDocuments}
/>
</div>
)}
<div className="flex w-full overflow-hidden overflow-y-scroll">
<div className="w-full h-full flex-col flex max-w-message-max mx-auto">
<div className="px-5 pt-8">
Expand All @@ -87,7 +210,6 @@ export function SharedChatDisplay({
<p className="text-emphasis">
{humanReadableFormat(chatSession.time_created)}
</p>

<Separator />
</div>
{isReady ? (
Expand Down Expand Up @@ -120,6 +242,20 @@ export function SharedChatDisplay({
content={message.message}
files={message.files || []}
citedDocuments={getCitedDocumentsFromMessage(message)}
// toggleDocumentSelection={() => {
// setDocumentSidebarToggled(true);
// }}
toggleDocumentSelection={() => {
if (
!documentSidebarToggled ||
(documentSidebarToggled &&
selectedMessageForDocDisplay ===
message.messageId)
) {
toggleDocumentSidebar();
}
setSelectedMessageForDocDisplay(message.messageId);
}}
isComplete
/>
);
Expand All @@ -133,10 +269,36 @@ export function SharedChatDisplay({
</div>
</div>
)}

{settings?.enterpriseSettings
?.custom_lower_disclaimer_content && (
<div className="mobile:hidden mt-4 flex items-center justify-center relative w-[95%] mx-auto">
<div className="text-sm text-text-500 max-w-searchbar-max px-4 text-center">
<MinimalMarkdown
content={
settings.enterpriseSettings
.custom_lower_disclaimer_content
}
/>
</div>
</div>
)}

{settings?.enterpriseSettings?.use_custom_logotype && (
<div className="hidden lg:block absolute right-0 bottom-0">
<img
src="/api/enterprise-settings/logotype"
alt="logotype"
style={{ objectFit: "contain" }}
className="w-fit h-8"
/>
</div>
)}
</div>
</div>
</div>

<FixedLogo backgroundToggled={false} />
<BackToOnyxButton />
</div>
</>
Expand Down
12 changes: 1 addition & 11 deletions web/src/app/chat/shared/[chatId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,5 @@ export default async function Page(props: {
console.log(`Message ${index} context_docs:`, message.context_docs);
});
}
return (
<div>
<div className="absolute top-0 z-40 w-full">
<FunctionalHeader page="shared" />
</div>

<div className="flex relative bg-background text-default overflow-hidden pt-16 h-screen">
<SharedChatDisplay chatSession={chatSession} persona={persona} />
</div>
</div>
);
return <SharedChatDisplay chatSession={chatSession} persona={persona} />;
}

0 comments on commit 0691a92

Please sign in to comment.