Skip to content

Commit

Permalink
Unified Conversation Page Refactor (#5766)
Browse files Browse the repository at this point in the history
* tmp

* Tmp

* Fix broken scroll

* Add Assistant browser container

* Partially working

* Improve new conversation

* It works

* Id

* Not needed

* Polish

* ✂️

* Fix conversation title top bar

* ✨

* ✂️

* ✨ ✨

* 🙈

* ✨

* Fix new conversation input bar animation

* ✂️

* 🔙

* Fix assistant details action

* Fix Try assistant drawer

* Fix layout + conversation title glitch

* Address comments from review

* Remove `.slice()`.

* Reduce navigation bar duration

* Delight
  • Loading branch information
flvndvd authored Jun 21, 2024
1 parent 7eeb93b commit 766bd5d
Show file tree
Hide file tree
Showing 14 changed files with 731 additions and 596 deletions.
4 changes: 2 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"rust-analyzer.linkedProjects": ["./core/Cargo.toml"],

"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll.eslint": true
"source.organizeImports": "never",
"source.fixAll.eslint": "explicit"
},
"eslint.run": "onSave",
"typescript.preferences.importModuleSpecifier": "non-relative"
Expand Down
5 changes: 1 addition & 4 deletions front/components/assistant/AssistantBrowser.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@ import type { GetAgentConfigurationsResponseBody } from "@app/pages/api/w/[wId]/
interface AssistantListProps {
owner: WorkspaceType;
agents: LightAgentConfigurationType[];
// for speed purposes, there is a partially loaded state for which we
// can show a subset of the agents
loadingStatus: "loading" | "partial" | "finished";
loadingStatus: "loading" | "finished";
handleAssistantClick: (agent: LightAgentConfigurationType) => void;
mutateAgentConfigurations: KeyedMutator<GetAgentConfigurationsResponseBody>;
}
Expand Down Expand Up @@ -191,7 +189,6 @@ export function AssistantBrowser({
subtitle={agent.lastAuthors?.join(", ") ?? ""}
description=""
variant="minimal"
onClick={() => handleAssistantClick(agent)}
onActionClick={() => setAssistantIdToShow(agent.sId)}
/>
</div>
Expand Down
25 changes: 13 additions & 12 deletions front/components/assistant/TryAssistant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,10 @@ export function TryAssistantModal({
>
<div
id={CONVERSATION_PARENT_SCROLL_DIV_ID.modal}
className="h-full overflow-y-auto"
className="flex h-full w-full flex-col items-center overflow-y-auto"
>
<GenerationContextProvider>
{conversation && (
{conversation ? (
<ConversationViewer
owner={owner}
user={user}
Expand All @@ -84,18 +84,19 @@ export function TryAssistantModal({
isInModal
key={conversation.sId}
/>
) : (
// Empty div to prefill the data.
<div className="flex h-full flex-1"></div>
)}

<div className="lg:[&>*]:left-0">
<FixedAssistantInputBar
owner={owner}
onSubmit={handleSubmit}
stickyMentions={stickyMentions}
conversationId={conversation?.sId || null}
additionalAgentConfiguration={assistant}
actions={["attachment"]}
/>
</div>
<FixedAssistantInputBar
owner={owner}
onSubmit={handleSubmit}
stickyMentions={stickyMentions}
conversationId={conversation?.sId || null}
additionalAgentConfiguration={assistant}
actions={["attachment"]}
/>
</GenerationContextProvider>
</div>
</Modal>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { Page } from "@dust-tt/sparkle";
import type {
LightAgentConfigurationType,
WorkspaceType,
} from "@dust-tt/types";
import { useCallback } from "react";

import { AssistantBrowser } from "@app/components/assistant/AssistantBrowser";
import { useProgressiveAgentConfigurations } from "@app/lib/swr";
import { classNames } from "@app/lib/utils";

interface AssistantBrowserContainerProps {
onAgentConfigurationClick: (agent: LightAgentConfigurationType) => void;
owner: WorkspaceType;
setAssistantToMention: (agent: LightAgentConfigurationType) => void;
}

export function AssistantBrowserContainer({
onAgentConfigurationClick,
owner,
setAssistantToMention,
}: AssistantBrowserContainerProps) {
const { agentConfigurations, isLoading, mutateAgentConfigurations } =
useProgressiveAgentConfigurations({
workspaceId: owner.sId,
});

const handleAssistantClick = useCallback(
// On click, scroll to the input bar and set the selected assistant.
async (agent: LightAgentConfigurationType) => {
const scrollContainerElement = document.getElementById(
"assistant-input-header"
);

if (!scrollContainerElement) {
console.log("Unexpected: scrollContainerElement not found");
return;
}
const scrollDistance = scrollContainerElement.getBoundingClientRect().top;

// If the input bar is already in view, set the mention directly. We leave
// a little margin, -2 instead of 0, since the autoscroll below can
// sometimes scroll a bit over 0, to -0.3 or -0.5, in which case if there
// is a clic on a visible assistant we still want this condition to
// trigger.
if (scrollDistance > -2) {
return onAgentConfigurationClick(agent);
}

// Otherwise, scroll to the input bar and set the ref (mention will be set via intersection observer).
scrollContainerElement.scrollIntoView({ behavior: "smooth" });

setAssistantToMention(agent);
},
[setAssistantToMention, onAgentConfigurationClick]
);

return (
<div
id="assistants-lists-container"
className={classNames(
"duration-400 flex h-full w-full flex-col gap-3 pt-9 transition-opacity",
isLoading ? "opacity-0" : "opacity-100"
)}
>
<div id="assistants-list-header" className="px-4">
<Page.SectionHeader title="Chat with..." />
</div>
<AssistantBrowser
owner={owner}
agents={agentConfigurations}
loadingStatus={isLoading ? "loading" : "finished"}
handleAssistantClick={handleAssistantClick}
mutateAgentConfigurations={mutateAgentConfigurations}
/>
</div>
);
}
Loading

0 comments on commit 766bd5d

Please sign in to comment.