Upgrade: New Home Screen for Khoj (#860)

* V1 of the new automations page
Implemented:
- Shareable
- Editable
- Suggested Cards
- Create new cards
- added side panel new conversation button
- Implement mobile-friendly view for homepage
- Fix issue of new conversations being created when selected agent is changed
- Improve center of the homepage experience
- Fix showing agent during first chat experience
- dark mode gradient updates

---------

Co-authored-by: sabaimran <narmiabas@gmail.com>

src/interface/web/app/common/chatFunctions.ts

@@ -76,7 +76,9 @@ export const setupWebSocket = async (conversationId: string, initialMessage?: st
 
     let webSocketUrl = `${wsProtocol}//${host}/api/chat/ws`;
 
-    if (conversationId === null) return null;
+    if (conversationId === null) {
+        return null;
+    }
 
     if (conversationId) {
         webSocketUrl += `?conversation_id=${conversationId}`;

src/interface/web/app/common/colorUtils.ts

@@ -0,0 +1,60 @@
+export function convertColorToTextClass(color: string) {
+    if (color === 'red') return `text-red-500`;
+    if (color === 'yellow') return `text-yellow-500`;
+    if (color === 'green') return `text-green-500`;
+    if (color === 'blue') return `text-blue-500`;
+    if (color === 'orange') return `text-orange-500`;
+    if (color === 'purple') return `text-purple-500`;
+    if (color === 'pink') return `text-pink-500`;
+    if (color === 'teal') return `text-teal-500`;
+    if (color === 'cyan') return `text-cyan-500`;
+    if (color === 'lime') return `text-lime-500`;
+    if (color === 'indigo') return `text-indigo-500`;
+    if (color === 'fuschia') return `text-fuschia-500`;
+    if (color === 'rose') return `text-rose-500`;
+    if (color === 'sky') return `text-sky-500`;
+    if (color === 'amber') return `text-amber-500`;
+    if (color === 'emerald') return `text-emerald-500`;
+    return `text-gray-500`;
+}
+
+export function convertSuggestionColorToTextClass(color: string) {
+    const colors = ['blue', 'yellow', 'green', 'pink', 'purple'];
+    if (colors.includes(color)) {
+        return "" + `bg-gradient-to-b from-[hsl(var(--background))] to-${color}-100/${color == "green" ? "90" : "70"} dark:from-[hsl(var(--background))] dark:to-${color}-950/30 dark:border dark:border-neutral-700`;
+    }
+    return `bg-gradient-to-b from-white to-orange-50`;
+}
+
+export function convertColorToBorderClass(color: string) {
+    console.log("Color:", color);
+    if (color === 'red') return `border-red-500`;
+    if (color === 'yellow') return `border-yellow-500`;
+    if (color === 'green') return `border-green-500`;
+    if (color === 'blue') return `border-blue-500`;
+    if (color === 'orange') return `border-orange-500`;
+    if (color === 'purple') return `border-purple-500`;
+    if (color === 'pink') return `border-pink-500`;
+    if (color === 'teal') return `border-teal-500`;
+    if (color === 'cyan') return `border-cyan-500`;
+    if (color === 'lime') return `border-lime-500`;
+    if (color === 'indigo') return `border-indigo-500`;
+    if (color === 'fuschia') return `border-fuschia-500`;
+    if (color === 'rose') return `border-rose-500`;
+    if (color === 'sky') return `border-sky-500`;
+    if (color === 'amber') return `border-amber-500`;
+    if (color === 'emerald') return `border-emerald-500`;
+    return `border-gray-500`;
+}
+
+export const colorMap: Record<string, string> = {
+    'red': 'border-red-500',
+    'blue': 'border-blue-500',
+    'green': 'border-green-500',
+    'yellow': 'border-yellow-500',
+    'purple': 'border-purple-500',
+    'pink': 'border-pink-500',
+    'indigo': 'border-indigo-500',
+    'gray': 'border-gray-500',
+    'orange': 'border-orange-500',
+};

src/interface/web/app/common/iconUtils.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { convertColorToTextClass } from './colorUtils';
+import {
+    Lightbulb,
+    Robot,
+    Aperture,
+    GraduationCap,
+    Jeep,
+    Island,
+    MathOperations,
+    Asclepius,
+    Couch,
+    Code,
+    Atom,
+    ClockCounterClockwise,
+    PaperPlaneTilt,
+    Info,
+    UserCircle,
+    Globe,
+    Palette,
+    LinkBreak,
+} from "@phosphor-icons/react";
+
+interface IconMap {
+    [key: string]: (color: string, width: string, height: string) => JSX.Element | null;
+}
+
+const iconMap: IconMap = {
+    Lightbulb: (color: string, width: string, height: string) => <Lightbulb className={`${width} ${height} ${color} mr-2`} />,
+    Robot: (color: string, width: string, height: string) => <Robot className={`${width} ${height} ${color} mr-2`} />,
+    Aperture: (color: string, width: string, height: string) => <Aperture className={`${width} ${height} ${color} mr-2`} />,
+    GraduationCap: (color: string, width: string, height: string) => <GraduationCap className={`${width} ${height} ${color} mr-2`} />,
+    Jeep: (color: string, width: string, height: string) => <Jeep className={`${width} ${height} ${color} mr-2`} />,
+    Island: (color: string, width: string, height: string) => <Island className={`${width} ${height} ${color} mr-2`} />,
+    MathOperations: (color: string, width: string, height: string) => <MathOperations className={`${width} ${height} ${color} mr-2`} />,
+    Asclepius: (color: string, width: string, height: string) => <Asclepius className={`${width} ${height} ${color} mr-2`} />,
+    Couch: (color: string, width: string, height: string) => <Couch className={`${width} ${height} ${color} mr-2`} />,
+    Code: (color: string, width: string, height: string) => <Code className={`${width} ${height} ${color} mr-2`} />,
+    Atom: (color: string, width: string, height: string) => <Atom className={`${width} ${height} ${color} mr-2`} />,
+    ClockCounterClockwise: (color: string, width: string, height: string) => <ClockCounterClockwise className={`${width} ${height} ${color} mr-2`} />,
+    Globe: (color: string, width: string, height: string) => <Globe className={`${width} ${height} ${color} mr-2`} />,
+    Palette: (color: string, width: string, height: string) => <Palette className={`${width} ${height} ${color} mr-2`} />,
+};
+
+function getIconFromIconName(iconName: string, color: string = 'gray', width: string = 'w-6', height: string = 'h-6') {
+    const icon = iconMap[iconName];
+    const colorName = color.toLowerCase();
+    const colorClass = convertColorToTextClass(colorName);
+
+    return icon ? icon(colorClass, width, height) : null;
+}
+
+export { getIconFromIconName };