mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-23 23:48:56 +01:00
Improve mobile friendly styling of chat session side panel
This commit is contained in:
parent
b26a6e25d1
commit
e9567741eb
2 changed files with 7 additions and 10 deletions
|
@ -72,9 +72,8 @@ import {
|
||||||
|
|
||||||
import { Pencil, Trash, Share } from "@phosphor-icons/react";
|
import { Pencil, Trash, Share } from "@phosphor-icons/react";
|
||||||
|
|
||||||
import { Button, buttonVariants } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||||
import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
|
import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
|
||||||
import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
|
import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
|
||||||
|
@ -141,7 +140,6 @@ function deleteConversation(conversationId: string) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
interface FilesMenuProps {
|
interface FilesMenuProps {
|
||||||
conversationId: string | null;
|
conversationId: string | null;
|
||||||
uploadedFiles: string[];
|
uploadedFiles: string[];
|
||||||
|
@ -555,7 +553,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
|
||||||
<DialogTitle>All Conversations</DialogTitle>
|
<DialogTitle>All Conversations</DialogTitle>
|
||||||
<DialogDescription
|
<DialogDescription
|
||||||
className="p-0">
|
className="p-0">
|
||||||
<ScrollArea className="h-[500px] p-4">
|
<ScrollArea className="h-[500px] py-4">
|
||||||
{data && Object.keys(data).map((timeGrouping) => (
|
{data && Object.keys(data).map((timeGrouping) => (
|
||||||
<div key={timeGrouping}>
|
<div key={timeGrouping}>
|
||||||
<div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
|
<div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
|
||||||
|
@ -655,18 +653,15 @@ interface SidePanelProps {
|
||||||
|
|
||||||
|
|
||||||
export default function SidePanel(props: SidePanelProps) {
|
export default function SidePanel(props: SidePanelProps) {
|
||||||
|
|
||||||
const [data, setData] = useState<ChatHistory[] | null>(null);
|
const [data, setData] = useState<ChatHistory[] | null>(null);
|
||||||
const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
|
const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
|
||||||
const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
|
const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
|
||||||
const [enabled, setEnabled] = useState(false);
|
const [enabled, setEnabled] = useState(false);
|
||||||
|
const [isMobileWidth, setIsMobileWidth] = useState(false);
|
||||||
|
|
||||||
const authenticatedData = useAuthenticatedData();
|
const authenticatedData = useAuthenticatedData();
|
||||||
const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : '');
|
const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : '');
|
||||||
|
|
||||||
|
|
||||||
const [isMobileWidth, setIsMobileWidth] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (chatSessions) {
|
if (chatSessions) {
|
||||||
setData(chatSessions);
|
setData(chatSessions);
|
||||||
|
|
|
@ -6,7 +6,8 @@ div.session {
|
||||||
max-width: 14rem;
|
max-width: 14rem;
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(auto, 350px) 1fr;
|
grid-template-columns: minmax(auto, 400px) 1fr;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.compressed {
|
div.compressed {
|
||||||
|
@ -83,6 +84,7 @@ div.profile {
|
||||||
|
|
||||||
div.panelWrapper {
|
div.panelWrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
padding: 0 1rem;
|
||||||
grid-template-rows: auto 1fr auto auto;
|
grid-template-rows: auto 1fr auto auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -142,6 +144,6 @@ div.modalSessionsList div.session {
|
||||||
|
|
||||||
div.session {
|
div.session {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
grid-template-columns: 200px 1fr;
|
grid-template-columns: minmax(auto, 70vw) 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue