Implement new home page redesign

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx

@@ -13,15 +13,13 @@ import { useManageWorkspaceModal } from "../../../Modals/ManageWorkspace";
 import ManageWorkspace from "../../../Modals/ManageWorkspace";
 import { ArrowDown } from "@phosphor-icons/react";
 import debounce from "lodash.debounce";
-import useUser from "@/hooks/useUser";
 import Chartable from "./Chartable";
 import Workspace from "@/models/workspace";
 import { useParams } from "react-router-dom";
 import paths from "@/utils/paths";
 import Appearance from "@/models/appearance";
 import useTextSize from "@/hooks/useTextSize";
 import useChatHistoryScrollHandle from "@/hooks/useChatHistoryScrollHandle";
-import { useTranslation } from "react-i18next";
 import { useChatMessageAlignment } from "@/hooks/useChatMessageAlignment";
 import { ThoughtExpansionProvider } from "./ThoughtContainer";
 
@@ -32,16 +30,13 @@ export default forwardRef(function (
     sendCommand,
     updateHistory,
     regenerateAssistantMessage,
-    hasAttachments = false,
   },
   ref
 ) {
-  const { t } = useTranslation();
   const lastScrollTopRef = useRef(0);
   const chatHistoryRef = useRef(null);
-  const { user } = useUser();
   const { threadSlug = null } = useParams();
-  const { showing, showModal, hideModal } = useManageWorkspaceModal();
+  const { showing, hideModal } = useManageWorkspaceModal();
   const [isAtBottom, setIsAtBottom] = useState(true);
   const [isUserScrolling, setIsUserScrolling] = useState(false);
   const isStreaming = history[history.length - 1]?.animate;
@@ -98,10 +93,6 @@ export default forwardRef(function (
     scrollToBottom,
   });
 
-  const handleSendSuggestedMessage = (heading, message) => {
-    sendCommand({ text: `${heading} ${message}`, autoSubmit: true });
-  };
-
   const saveEditedMessage = async ({
     editedMessage,
     chatId,
@@ -197,46 +188,6 @@ export default forwardRef(function (
     [compiledHistory.length, lastMessageInfo]
   );
 
-  if (history.length === 0 && !hasAttachments) {
-    return (
-      <div className="flex flex-col h-full md:mt-0 pb-44 md:pb-40 w-full justify-end items-center">
-        <div className="flex flex-col items-center md:items-start md:max-w-[600px] w-full px-4">
-          <p className="text-white/60 text-lg font-base py-4">
-            {t("chat_window.welcome")}
-          </p>
-          {!user || user.role !== "default" ? (
-            <p className="w-full items-center text-white/60 text-lg font-base flex flex-col md:flex-row gap-x-1">
-              {t("chat_window.get_started")}
-              <span
-                className="underline font-medium cursor-pointer"
-                onClick={showModal}
-              >
-                {t("chat_window.upload")}
-              </span>
-              {t("chat_window.or")}{" "}
-              <b className="font-medium italic">{t("chat_window.send_chat")}</b>
-            </p>
-          ) : (
-            <p className="w-full items-center text-white/60 text-lg font-base flex flex-col md:flex-row gap-x-1">
-              {t("chat_window.get_started_default")}{" "}
-              <b className="font-medium italic">{t("chat_window.send_chat")}</b>
-            </p>
-          )}
-          <WorkspaceChatSuggestions
-            suggestions={workspace?.suggestedMessages ?? []}
-            sendSuggestion={handleSendSuggestedMessage}
-          />
-        </div>
-        {showing && (
-          <ManageWorkspace
-            hideModal={hideModal}
-            providedSlug={workspace.slug}
-          />
-        )}
-      </div>
-    );
-  }
-
   return (
     <ThoughtExpansionProvider>
       <div
@@ -282,24 +233,6 @@ const getLastMessageInfo = (history) => {
   };
 };
 
-function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) {
-  if (suggestions.length === 0) return null;
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-theme-text-primary text-xs mt-10 w-full justify-center">
-      {suggestions.map((suggestion, index) => (
-        <button
-          key={index}
-          className="text-left p-2.5 rounded-xl bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover border border-theme-border"
-          onClick={() => sendSuggestion(suggestion.heading, suggestion.message)}
-        >
-          <p className="font-semibold">{suggestion.heading}</p>
-          <p>{suggestion.message}</p>
-        </button>
-      ))}
-    </div>
-  );
-}
-
 /**
  * Builds the history of messages for the chat.
  * This is mostly useful for rendering the history in a way that is easy to understand.

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx

@@ -16,13 +16,13 @@ export default function AvailableAgentsButton({ showing, setShowAgents }) {
       data-tooltip-content={t("chat_window.agents")}
       aria-label={t("chat_window.agents")}
       onClick={() => setShowAgents(!showing)}
-      className={`flex justify-center items-center cursor-pointer ${
+      className={`flex justify-center items-center cursor-pointer opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 ${
         showing ? "!opacity-100" : ""
       }`}
     >
       <At
         color="var(--theme-sidebar-footer-icon-fill)"
-        className={`w-[22px] h-[22px] pointer-events-none text-theme-text-primary opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60`}
+        className="w-[20px] h-[20px] pointer-events-none text-theme-text-primary"
       />
       <Tooltip
         id="tooltip-agent-list-btn"
@@ -47,6 +47,7 @@ export function AvailableAgents({
   setShowing,
   sendCommand,
   promptRef,
+  centered = false,
 }) {
   const formRef = useRef(null);
   const agentSessionActive = useIsAgentSessionActive();
@@ -88,7 +89,13 @@ export function AvailableAgents({
   return (
     <>
       <div hidden={!showing}>
-        <div className="w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4">
+        <div
+          className={
+            centered
+              ? "w-full flex justify-center absolute bottom-full mb-2 left-0 z-10 px-4"
+              : "w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4"
+          }
+        >
           <div
             ref={formRef}
             className="w-[600px] p-2 bg-theme-action-menu-bg rounded-2xl shadow flex-col justify-center items-start gap-2.5 inline-flex"

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx

@@ -15,10 +15,15 @@ import ParsedFilesMenu from "./ParsedFilesMenu";
  * This is a simple proxy component that clicks on the DnD file uploader for the user.
  * @returns
  */
-export default function AttachItem() {
+export default function AttachItem({
+  workspaceSlug = null,
+  workspaceThreadSlug = null,
+}) {
   const { t } = useTranslation();
   const { theme } = useTheme();
-  const { slug, threadSlug = null } = useParams();
+  const params = useParams();
+  const slug = workspaceSlug || params.slug;
+  const threadSlug = workspaceThreadSlug ?? params.threadSlug ?? null;
   const tooltipRef = useRef(null);
   const [isEmbedding, setIsEmbedding] = useState(false);
   const [files, setFiles] = useState([]);
@@ -93,7 +98,7 @@ export default function AttachItem() {
         <div className="relative">
           <PaperclipHorizontal
             color="var(--theme-sidebar-footer-icon-fill)"
-            className="w-[22px] h-[22px] pointer-events-none text-white rotate-90 -scale-y-100"
+            className="w-[20px] h-[20px] pointer-events-none text-white rotate-90 -scale-y-100"
           />
           {files.length > 0 && (
             <div className="absolute -top-2 right-[1%] bg-white text-black light:invert text-[8px] rounded-full px-1 flex items-center justify-center">

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/LLMSelector/action.jsx

@@ -3,6 +3,7 @@ import { Brain, CheckCircle } from "@phosphor-icons/react";
 import LLMSelectorModal from "./index";
 import { useTheme } from "@/hooks/useTheme";
 import { useRef, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import useUser from "@/hooks/useUser";
 import { useModal } from "@/hooks/useModal";
 import SetupProvider from "./SetupProvider";
@@ -12,6 +13,7 @@ export const SAVE_LLM_SELECTOR_EVENT = "save_llm_selector";
 export const PROVIDER_SETUP_EVENT = "provider_setup_requested";
 
 export default function LLMSelectorAction() {
+  const { slug } = useParams();
   const tooltipRef = useRef(null);
   const { theme } = useTheme();
   const { user } = useUser();
@@ -87,6 +89,7 @@ export default function LLMSelectorAction() {
   // This feature is disabled for multi-user instances where the user is not an admin
   // This is because of the limitations of model selection currently and other nuances in controls.
   if (!!user && user.role !== "admin") return null;
+  if (!slug) return null;
 
   return (
     <>
@@ -97,9 +100,9 @@ export default function LLMSelectorAction() {
         className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer`}
       >
         {saved ? (
-          <CheckCircle className="w-[22px] h-[22px] pointer-events-none text-green-400" />
+          <CheckCircle className="w-[20px] h-[20px] pointer-events-none text-green-400" />
         ) : (
-          <Brain className="w-[22px] h-[22px] pointer-events-none text-[var(--theme-sidebar-footer-icon-fill)]" />
+          <Brain className="w-[20px] h-[20px] pointer-events-none text-[var(--theme-sidebar-footer-icon-fill)]" />
         )}
       </div>
       <Tooltip

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx

@@ -15,13 +15,13 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
       data-tooltip-id="tooltip-slash-cmd-btn"
       data-tooltip-content={t("chat_window.slash")}
       onClick={() => setShowSlashCommand(!showing)}
-      className={`flex justify-center items-center cursor-pointer ${
+      className={`flex justify-center items-center cursor-pointer opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 ${
         showing ? "!opacity-100" : ""
       }`}
     >
       <SlashCommandIcon
         color="var(--theme-sidebar-footer-icon-fill)"
-        className={`w-[20px] h-[20px] pointer-events-none opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60`}
+        className="w-[18px] h-[18px] pointer-events-none"
       />
       <Tooltip
         id="tooltip-slash-cmd-btn"
@@ -33,7 +33,13 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
   );
 }
 
-export function SlashCommands({ showing, setShowing, sendCommand, promptRef }) {
+export function SlashCommands({
+  showing,
+  setShowing,
+  sendCommand,
+  promptRef,
+  centered = false,
+}) {
   const cmdRef = useRef(null);
   useSlashCommandKeyboardNavigation({ showing });
 
@@ -54,7 +60,13 @@ export function SlashCommands({ showing, setShowing, sendCommand, promptRef }) {
 
   return (
     <div hidden={!showing}>
-      <div className="w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4">
+      <div
+        className={
+          centered
+            ? "w-full flex justify-center absolute bottom-full mb-2 left-0 z-10 px-4"
+            : "w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4"
+        }
+      >
         <div
           ref={cmdRef}
           className="w-[600px] bg-theme-action-menu-bg rounded-2xl flex shadow flex-col justify-start items-start gap-2.5 p-2 overflow-y-auto max-h-[300px] no-scroll"

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx

@@ -130,9 +130,9 @@ export default function SpeechToText({ sendCommand }) {
       }`}
     >
       <Microphone
-        weight="fill"
+        weight="regular"
         color="var(--theme-sidebar-footer-icon-fill)"
-        className={`w-[22px] h-[22px] pointer-events-none text-theme-text-primary ${
+        className={`w-[20px] h-[20px] pointer-events-none text-theme-text-primary ${
           listening ? "animate-pulse-glow" : ""
         }`}
       />

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx

@@ -1,4 +1,5 @@
 import { ABORT_STREAM_EVENT } from "@/utils/chat";
+import { Stop } from "@phosphor-icons/react";
 import { Tooltip } from "react-tooltip";
 
 export default function StopGenerationButton() {
@@ -13,40 +14,16 @@ export default function StopGenerationButton() {
         onClick={emitHaltEvent}
         data-tooltip-id="stop-generation-button"
         data-tooltip-content="Stop generating response"
-        className="border-none text-white/60 cursor-pointer group -mr-1.5 mt-1.5"
+        className="border-none inline-flex justify-center items-center rounded-full cursor-pointer w-[20px] h-[20px] bg-white hover:opacity-80 transition-opacity"
         aria-label="Stop generating"
       >
-        <svg
-          width="28"
-          height="28"
-          viewBox="0 0 28 28"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          style={{ transform: "scale(1.3)" }}
-          className="opacity-60 group-hover:opacity-100 light:opacity-100 light:group-hover:opacity-60"
-        >
-          <circle
-            cx="10"
-            cy="10.562"
-            r="9"
-            strokeWidth="2"
-            className="group-hover:stroke-primary-button stroke-white light:stroke-theme-text-secondary"
-          />
-          <rect
-            x="6.3999"
-            y="6.96204"
-            width="7.2"
-            height="7.2"
-            rx="2"
-            className="group-hover:fill-primary-button fill-white light:fill-theme-text-secondary"
-          />
-        </svg>
+        <Stop className="w-[12px] h-[12px] text-black" weight="fill" />
       </button>
       <Tooltip
         id="stop-generation-button"
         place="bottom"
         delayShow={300}
-        className="tooltip !text-xs z-99 -ml-1"
+        className="tooltip !text-xs z-99"
       />
     </>
   );

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx

@@ -28,7 +28,7 @@ export default function TextSizeButton() {
         <TextT
           color="var(--theme-sidebar-footer-icon-fill)"
           weight="fill"
-          className="w-[22px] h-[22px] pointer-events-none text-white"
+          className="w-[20px] h-[20px] pointer-events-none text-white"
         />
       </div>
       <Tooltip