Skip to content

Commit

Permalink
k
Browse files Browse the repository at this point in the history
  • Loading branch information
@pablonyx
pablonyx committed Dec 1, 2024
1 parent e4c1cac commit 12d53a7
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 68 deletions.
3 changes: 1 addition & 2 deletions web/src/app/chat/ChatPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2075,14 +2075,13 @@ export function ChatPage({
right-0
z-[1000]
bg-background
bg-background
h-screen
transition-all
bg-opacity-80
duration-300
ease-in-out
bg-transparent
overflow-y-hidden
transition-all
bg-opacity-80
duration-300
Expand Down
86 changes: 54 additions & 32 deletions web/src/app/chat/shared_chat_search/SearchFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { ToolTipDetails } from "@/components/admin/connectors/Field";

import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { TooltipProvider } from "@radix-ui/react-tooltip";

const SectionTitle = ({
children,
Expand Down Expand Up @@ -120,7 +128,7 @@ export function SourceSelector({
return (
<div>
{!filtersUntoggled && (
<CardContent className="overflow-x-hidden space-y-2">
<CardContent className=" space-y-2">
<div>
<div className="flex py-2 mt-2 justify-start gap-x-2 items-center">
<p className="text-sm font-semibold">Time Range</p>
Expand Down Expand Up @@ -160,8 +168,17 @@ export function SourceSelector({
: undefined
}
onSelect={(daterange) => {
const initialDate = daterange?.from || new Date();
const endDate = daterange?.to || new Date();
const today = new Date();
const initialDate = daterange?.from
? new Date(
Math.min(daterange.from.getTime(), today.getTime())
)
: today;
const endDate = daterange?.to
? new Date(
Math.min(daterange.to.getTime(), today.getTime())
)
: today;
setTimeRange({
from: initialDate,
to: endDate,
Expand Down Expand Up @@ -192,19 +209,22 @@ export function SourceSelector({
<SectionTitle modal={modal}>Sources</SectionTitle>

<div className="space-y-0">
<div className="flex items-center space-x-2 cursor-pointer hover:bg-background-200 rounded-md p-2">
<Checkbox
id="select-all-sources"
checked={allSourcesSelected}
onCheckedChange={toggleAllSources}
/>
<label
htmlFor="select-all-sources"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Select All
</label>
</div>
{existingSources.length > 1 && (
<div className="flex items-center space-x-2 cursor-pointer hover:bg-background-200 rounded-md p-2">
<Checkbox
id="select-all-sources"
checked={allSourcesSelected}
onCheckedChange={toggleAllSources}
/>

<label
htmlFor="select-all-sources"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Select All
</label>
</div>
)}
{listSourceMetadata()
.filter((source) =>
existingSources.includes(source.internalName)
Expand All @@ -219,7 +239,6 @@ export function SourceSelector({
checked={selectedSources
.map((s) => s.internalName)
.includes(source.internalName)}
onCheckedChange={() => handleSelect(source)}
/>
<SourceIcon
sourceType={source.internalName}
Expand All @@ -239,26 +258,29 @@ export function SourceSelector({
{availableDocumentSets.map((documentSet) => (
<div
key={documentSet.name}
className="flex items-center space-x-2 cursor-pointer hover:bg-accent rounded-md p-2"
className="flex items-center space-x-2 cursor-pointer hover:bg-background-200 rounded-md p-2"
onClick={() => handleDocumentSetSelect(documentSet.name)}
>
<Checkbox
checked={selectedDocumentSets.includes(documentSet.name)}
onCheckedChange={() =>
handleDocumentSetSelect(documentSet.name)
}
/>
<HoverPopup
mainContent={
<InfoIcon className={`${defaultTailwindCSS} h-4 w-4`} />
}
popupContent={
<div className="text-sm w-64">
<div className="font-medium">Description</div>
<div className="mt-1">{documentSet.description}</div>
</div>
}
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon
className={`${defaultTailwindCSS} h-4 w-4`}
/>
</TooltipTrigger>
<TooltipContent>
<div className="text-sm w-64">
<div className="font-medium">Description</div>
<div className="mt-1">
{documentSet.description}
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<span className="text-sm">{documentSet.name}</span>
</div>
))}
Expand Down
82 changes: 48 additions & 34 deletions web/src/components/chat_search/AssistantSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef, useCallback } from "react";
import React, { useState, useRef, useCallback, useEffect } from "react";
import { useAssistants } from "@/components/context/AssistantsContext";
import { useChatContext } from "@/components/context/ChatContext";
import { useUser } from "@/components/user/UserProvider";
Expand All @@ -17,6 +17,7 @@ import {
useSensor,
useSensors,
DragEndEvent,
slack,
} from "@dnd-kit/core";
import {
arrayMove,
Expand Down Expand Up @@ -48,37 +49,22 @@ const AssistantSelector = ({
llmOverrideManager?: LlmOverrideManager;
isMobile: boolean;
}) => {
const { finalAssistants, refreshAssistants } = useAssistants();
const { finalAssistants } = useAssistants();
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const { llmProviders } = useChatContext();
const { user } = useUser();
const [assistants, setAssistants] = useState<Persona[]>(finalAssistants);
const [selectedTab, setSelectedTab] = useState(0);
const [isTemperatureExpanded, setIsTemperatureExpanded] = useState(false);
const [localTemperature, setLocalTemperature] = useState<number>(
llmOverrideManager?.temperature || 0
);

useEffect(() => {
setAssistants(finalAssistants);
}, [finalAssistants]);

useEffect(() => {
if (!isMobile) {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () =>
document.removeEventListener("mousedown", handleClickOutside);
}
}, [isMobile]);
// Initialize selectedTab from localStorage
const [selectedTab, setSelectedTab] = useState<number>(() => {
const storedTab = localStorage.getItem("assistantSelectorSelectedTab");
return storedTab !== null ? Number(storedTab) : 0;
});

const sensors = useSensors(
useSensor(PointerSensor, {
Expand Down Expand Up @@ -121,6 +107,12 @@ const AssistantSelector = ({
debouncedSetTemperature(value);
};

// Handle tab change and update localStorage
const handleTabChange = (index: number) => {
setSelectedTab(index);
localStorage.setItem("assistantSelectorSelectedTab", index.toString());
};

// Get the user's default model
const userDefaultModel = user?.preferences.default_model;

Expand All @@ -135,28 +127,28 @@ const AssistantSelector = ({

const content = (
<>
<Tab.Group selectedIndex={selectedTab} onChange={setSelectedTab}>
<Tab.Group selectedIndex={selectedTab} onChange={handleTabChange}>
<Tab.List className="flex p-1 space-x-1 bg-gray-100 rounded-t-md">
<Tab
className={({ selected }) =>
`w-full py-2.5 text-sm leading-5 font-medium rounded-md
${
selected
? "bg-white text-gray-700 shadow"
: "text-gray-500 hover:bg-white/[0.12] hover:text-gray-700"
}`
${
selected
? "bg-white text-gray-700 shadow"
: "text-gray-500 hover:bg-white/[0.12] hover:text-gray-700"
}`
}
>
Assistant
</Tab>
<Tab
className={({ selected }) =>
`w-full py-2.5 text-sm leading-5 font-medium rounded-md
${
selected
? "bg-white text-gray-700 shadow"
: "text-gray-500 hover:bg-white/[0.12] hover:text-gray-700"
}`
${
selected
? "bg-white text-gray-700 shadow"
: "text-gray-500 hover:bg-white/[0.12] hover:text-gray-700"
}`
}
>
Model
Expand Down Expand Up @@ -282,13 +274,35 @@ const AssistantSelector = ({
</>
);

useEffect(() => {
if (!isMobile) {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsOpen(false);
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}
}, [isMobile]);

return (
<div className="pointer-events-auto relative" ref={dropdownRef}>
<div className="flex justify-center">
<div
onClick={() => {
setIsOpen(!isOpen);
setSelectedTab(0);
// Get selectedTab from localStorage when opening
const storedTab = localStorage.getItem(
"assistantSelectorSelectedTab"
);
setSelectedTab(storedTab !== null ? Number(storedTab) : 0);
}}
className="flex items-center gap-x-2 justify-between px-6 py-3 text-sm font-medium text-white bg-black rounded-full shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
>
Expand Down

0 comments on commit 12d53a7

Please sign in to comment.