Skip to content
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

Feedback inspector in Assistant builder #9680

Merged
merged 16 commits into from
Jan 8, 2025
Merged

Feedback inspector in Assistant builder #9680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
acc8fbe
Main code brought in
overmode Dec 31, 2024
c29d504
Improved design for feedback list. Bug with ordering
overmode Dec 31, 2024
6ff05c2
Specialized fetch function (renamed), small margin added to feedbacks…
overmode Jan 2, 2025
937ac19
Using pagination inside feedbacks side modal
overmode Jan 2, 2025
f850b2e
Renamed batch to page, minor improvements
overmode Jan 2, 2025
8187de5
Update front/components/assistant_builder/AssistantBuilderPreviewDraw…
overmode Jan 2, 2025
a4f195f
Moved feedback code in its own file, added some props, regular cn usage
overmode Jan 2, 2025
858e989
UseSWRInfinity and IntersectionObserver
overmode Jan 3, 2025
6f1dee6
Modified message anchor to be a hash param
overmode Jan 3, 2025
d3c7e34
linter
overmode Jan 3, 2025
fa7baf8
Now returning resource in static resource function
overmode Jan 7, 2025
74a826d
Using a query param
overmode Jan 7, 2025
117157b
Renamed variable
overmode Jan 7, 2025
ae1c980
bask to hasMore variable name
overmode Jan 8, 2025
4213802
useInView hook
overmode Jan 8, 2025
e693865
Fixed drawer styleing (and icon)
overmode Jan 8, 2025
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
54 changes: 29 additions & 25 deletions front/components/assistant_builder/AssistantBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import "react-image-crop/dist/ReactCrop.css";

import {
BarChartIcon,
Button,
ChatBubbleBottomCenterTextIcon,
ChevronLeftIcon,
Expand Down Expand Up @@ -500,6 +501,7 @@ export default function AssistantBuilder({
}
buttonsRightPanel={
<>
{/* Chevron button */}
<Button
size="sm"
variant="ghost"
Expand All @@ -511,39 +513,40 @@ export default function AssistantBuilder({
disabled={isBuilderStateEmpty}
onClick={toggleRightPanel}
/>
{rightPanelStatus.tab === null && template === null && (
<Button
icon={ChatBubbleBottomCenterTextIcon}
onClick={() => openRightPanelTab("Preview")}
size="md"
tooltip={
isBuilderStateEmpty
? "Add instructions or tools to Preview"
: "Preview"
}
variant="highlight"
disabled={isBuilderStateEmpty}
className={cn(
isPreviewButtonAnimating && "animate-breathing-scale"
)}
/>
)}
{rightPanelStatus.tab === null && template !== null && (
{rightPanelStatus.tab === null && (
<div className="flex flex-col gap-3">
{/* Preview Button */}
<Button
icon={ChatBubbleBottomCenterTextIcon}
onClick={() => openRightPanelTab("Preview")}
size="sm"
variant="outline"
tooltip="Preview your assistant"
className={cn(
isPreviewButtonAnimating && "animate-breathing-scale"
)}
disabled={isBuilderStateEmpty}
/>
<Button
icon={MagicIcon}
onClick={() => openRightPanelTab("Template")}
size="sm"
variant="outline"
tooltip="Template instructions"
/>
{/* Performance Button */}
{!!agentConfigurationId && (
flvndvd marked this conversation as resolved.
Show resolved Hide resolved
<Button
icon={BarChartIcon}
onClick={() => openRightPanelTab("Performance")}
size="sm"
variant="outline"
tooltip="Inspect feedback and performance"
/>
)}
{/* Template Button */}
{template !== null && (
<Button
icon={MagicIcon}
onClick={() => openRightPanelTab("Template")}
size="sm"
variant="outline"
tooltip="Template instructions"
/>
)}
</div>
)}
</>
Expand All @@ -565,6 +568,7 @@ export default function AssistantBuilder({
rightPanelStatus={rightPanelStatus}
openRightPanelTab={openRightPanelTab}
builderState={builderState}
agentConfigurationId={agentConfigurationId}
Copy link
Contributor Author

@overmode overmode Jan 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

passing Id instead of LightAgentConfigurationType because a larger refactoring is needed (wouldn't be consistent with submitAssistantBuilderForm, SharingButton, InstructionScreen, useSlackChannel, ...)

setAction={setAction}
/>
}
Expand Down
64 changes: 43 additions & 21 deletions front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {
BarChartIcon,
Button,
ChatBubbleBottomCenterTextIcon,
classNames,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
Expand All @@ -27,6 +29,7 @@ import { useContext, useEffect } from "react";
import ConversationViewer from "@app/components/assistant/conversation/ConversationViewer";
import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
import { AssistantInputBar } from "@app/components/assistant/conversation/input_bar/InputBar";
import { FeedbacksSection } from "@app/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks";
import {
usePreviewAssistant,
useTryAssistantCore,
Expand All @@ -41,7 +44,6 @@ import { getDefaultActionConfiguration } from "@app/components/assistant_builder
import { ConfirmContext } from "@app/components/Confirm";
import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
import { useUser } from "@app/lib/swr/user";
import { classNames } from "@app/lib/utils";
import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";

interface AssistantBuilderRightPanelProps {
Expand All @@ -54,6 +56,7 @@ interface AssistantBuilderRightPanelProps {
rightPanelStatus: AssistantBuilderRightPanelStatus;
openRightPanelTab: (tabName: AssistantBuilderRightPanelTab) => void;
builderState: AssistantBuilderState;
agentConfigurationId: string | null;
setAction: (action: AssistantBuilderSetActionType) => void;
}

Expand All @@ -67,6 +70,7 @@ export default function AssistantBuilderRightPanel({
rightPanelStatus,
openRightPanelTab,
builderState,
agentConfigurationId,
setAction,
}: AssistantBuilderRightPanelProps) {
const {
Expand Down Expand Up @@ -104,39 +108,48 @@ export default function AssistantBuilderRightPanel({

return (
<div className="flex h-full flex-col">
{template && (
<div className="shrink-0 bg-white pt-5">
<Tabs
value={rightPanelStatus.tab ?? "Preview"}
onValueChange={(t) =>
openRightPanelTab(t as AssistantBuilderRightPanelTab)
}
className="hidden lg:flex"
>
<TabsList className="inline-flex h-10 items-center gap-2 border-b border-separator">
<div className="shrink-0 bg-white pt-5">
<Tabs
value={rightPanelStatus.tab ?? "Preview"}
onValueChange={(t) =>
openRightPanelTab(t as AssistantBuilderRightPanelTab)
}
className="hidden lg:flex"
>
<TabsList className="inline-flex items-center gap-2 border-b border-separator">
Copy link
Contributor Author

@overmode overmode Jan 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the h-10 because it was producing a vertical scroll bar. The rest is unchanged.

{template && (
<TabsTrigger value="Template" label="Template" icon={MagicIcon} />
)}
{/* The agentConfigurationId is truthy iff not a new assistant */}
{agentConfigurationId && (
<TabsTrigger
value="Preview"
label="Preview"
icon={ChatBubbleBottomCenterTextIcon}
value="Performance"
label="Performance"
icon={BarChartIcon}
/>
</TabsList>
</Tabs>
</div>
)}
)}
<TabsTrigger
value="Preview"
label="Preview"
icon={ChatBubbleBottomCenterTextIcon}
/>
</TabsList>
</Tabs>
</div>
<div
className={classNames(
template !== null
? "grow-1 mb-5 h-full overflow-y-auto rounded-b-xl border-x border-b border-structure-200 bg-structure-50 pt-5"
: "grow-1 mb-5 mt-5 h-full overflow-y-auto rounded-xl border border-structure-200 bg-structure-50",
? "grow-1 mb-5 h-full overflow-y-auto rounded-b-xl border-x border-b border-structure-200 pt-5"
: "grow-1 mb-5 mt-5 h-full overflow-y-auto rounded-xl border border-structure-200",
shouldAnimatePreviewDrawer &&
rightPanelStatus.tab === "Preview" &&
rightPanelStatus.openedAt != null &&
// Only animate the reload if the drawer has been open for at least 1 second.
// This is to prevent the animation from triggering right after the drawer is opened.
Date.now() - rightPanelStatus.openedAt > 1000
? "animate-reload"
: ""
: "",
rightPanelStatus.tab !== "Performance" ? "bg-structure-50" : ""
)}
>
{(rightPanelStatus.tab === "Preview" || screen === "naming") &&
Expand Down Expand Up @@ -263,6 +276,15 @@ export default function AssistantBuilderRightPanel({
</div>
</div>
)}
{rightPanelStatus.tab === "Performance" && agentConfigurationId && (
overmode marked this conversation as resolved.
Show resolved Hide resolved
<div className="ml-4 mt-4">
<Page.SectionHeader title="Feedback" />
<FeedbacksSection
owner={owner}
agentConfigurationId={agentConfigurationId}
/>
</div>
)}
</div>
</div>
);
Expand Down
Loading
Loading