klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 05:29:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

create a useismobilewidth method for standardized mobile view detection.

Browse Source
This commit is contained in:
sabaimran
2024-08-07 21:04:44 +05:30
parent 2943bed5d4
commit f28693c8c7
12 changed files with 48 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/interface/web/app/components/chatHistory/chatHistory.tsx
View File

@@ -19,6 +19,7 @@ import ProfileCard from "../profileCard/profileCard";
import { getIconFromIconName } from "@/app/common/iconUtils";
import { AgentData } from "@/app/agents/page";
import React from "react";
import { useIsMobileWidth } from "@/app/common/utils";
interface ChatResponse {
status: string;
@@ -75,15 +76,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
number | null
>(null);
const [fetchingData, setFetchingData] = useState(false);
const [isMobileWidth, setIsMobileWidth] = useState(false);
useEffect(() => {
window.addEventListener("resize", () => {
setIsMobileWidth(window.innerWidth < 786);
});
setIsMobileWidth(window.innerWidth < 786);
}, []);
const isMobileWidth = useIsMobileWidth();
useEffect(() => {
// This function ensures that scrolling to bottom happens after the data (chat messages) has been updated and rendered the first time.

22
src/interface/web/app/components/navMenu/navMenu.tsx
View File

@@ -22,33 +22,17 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Moon,
Sun,
UserCircle,
User,
Robot,
MagnifyingGlass,
Question,
GearFine,
ArrowRight,
UsersFour,
} from "@phosphor-icons/react";
import { Moon, Sun, UserCircle, Question, GearFine, ArrowRight } from "@phosphor-icons/react";
import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
import { useIsMobileWidth } from "@/app/common/utils";
export default function NavMenu() {
const userData = useAuthenticatedData();
const [isMobileWidth, setIsMobileWidth] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [initialLoadDone, setInitialLoadDone] = useState(false);
const isMobileWidth = useIsMobileWidth();
useEffect(() => {
setIsMobileWidth(window.innerWidth < 786);
window.addEventListener("resize", () => {
setIsMobileWidth(window.innerWidth < 786);
});
if (localStorage.getItem("theme") === "dark") {
document.documentElement.classList.add("dark");
setDarkMode(true);

2
src/interface/web/app/components/suggestions/suggestionCard.tsx
View File

@@ -14,7 +14,7 @@ interface SuggestionCardProps {
export default function SuggestionCard(data: SuggestionCardProps) {
const bgColors = converColorToBgGradient(data.color);
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px] cursor-pointer`;
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] md:h-[200px] cursor-pointer`;
const titleClassName = `${styles.title} pt-2 dark:text-white dark:font-bold`;
const descriptionClassName = `${styles.text} dark:text-white`;