Merge branch 'master' into pr/settings

ui/components/EmptyChat.tsx

@@ -13,7 +13,6 @@ const EmptyChat = ({
   return (
     <div className="relative">
       <SettingsEntry className="absolute top-4 right-0 lg:hidden" />
-
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
           Research begins here.

ui/components/EmptyChatMessageInput.tsx

@@ -1,5 +1,5 @@
 import { ArrowRight } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import CopilotToggle from './MessageInputActions/Copilot';
 import Focus from './MessageInputActions/Focus';
@@ -16,6 +16,23 @@ const EmptyChatMessageInput = ({
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
 
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === '/') {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -34,6 +51,7 @@ const EmptyChatMessageInput = ({
     >
       <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-5 pt-5 pb-2 rounded-lg w-full border border-light-200 dark:border-dark-200">
         <TextareaAutosize
+          ref={inputRef}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           minRows={2}

ui/components/MessageBox.tsx

@@ -7,7 +7,6 @@ import { cn } from '@/lib/utils';
 import {
   BookCopy,
   Disc3,
-  Share,
   Volume2,
   StopCircle,
   Layers3,

ui/components/MessageInput.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 import { ArrowUp } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import Attach from './MessageInputActions/Attach';
 import CopilotToggle from './MessageInputActions/Copilot';
@@ -25,6 +25,23 @@ const MessageInput = ({
     }
   }, [textareaRows, mode, message]);
 
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === '/') {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -47,6 +64,7 @@ const MessageInput = ({
     >
       {mode === 'single' && <Attach />}
       <TextareaAutosize
+        ref={inputRef}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
         onHeightChange={(height, props) => {

ui/components/SettingsDialog.tsx

@@ -4,7 +4,6 @@ import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
 import React, {
   Fragment,
   useEffect,
-  useMemo,
   useState,
   type SelectHTMLAttributes,
 } from 'react';

ui/components/theme/Switcher.tsx

@@ -2,7 +2,6 @@
 import { useTheme } from 'next-themes';
 import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
 import { Select } from '../SettingsDialog';
 
 type Theme = 'dark' | 'light' | 'system';
@@ -53,7 +52,7 @@ const ThemeSwitcher = ({ className }: { className?: string }) => {
       onChange={(e) => handleThemeSwitch(e.target.value as Theme)}
       options={[
         { value: 'light', label: 'Light' },
-        { value: 'dark', label: 'Dark' }
+        { value: 'dark', label: 'Dark' },
       ]}
     />
   );

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {