add new componets from coral

Author: Fr4nc3

src/frontend_react/src/components/content/HomeInput.tsx

@@ -18,6 +18,7 @@ import { TaskService } from "../../services/TaskService";
 import { NewTaskService } from "../../services/NewTaskService";
 import ChatInput from "@/coral/modules/ChatInput";
 import InlineToaster, { useInlineToaster } from "../toast/InlineToaster";
+import PromptCard from "@/coral/components/PromptCard";
 
 const HomeInput: React.FC<HomeInputProps> = ({
     onInputSubmit,
@@ -124,33 +125,13 @@ const HomeInput: React.FC<HomeInputProps> = ({
                         </div>
                         <div className="home-input-quick-tasks">
                             {quickTasks.map((task) => (
-                                <Card
+                                <PromptCard
                                     key={task.id}
-                                    className="home-input-quick-task-card"
-                                    onMouseOver={(e) =>
-                                    (e.currentTarget.style.backgroundColor =
-                                        "var(--colorNeutralBackground4Hover)")
-                                    }
-                                    onMouseOut={(e) =>
-                                    (e.currentTarget.style.backgroundColor =
-                                        "var(--colorNeutralBackground3)")
-                                    }
-                                    onClick={
-                                        !submitting ? () => handleQuickTaskClick(task) : undefined
-                                    }
-                                >
-                                    <div className="home-input-quick-task-content">
-                                        <div className="home-input-quick-task-icon">
-                                            {task.icon}
-                                        </div>
-                                        <div className="home-input-quick-task-text-content">
-                                            <Body1Strong>{task.title}</Body1Strong>
-                                            <Body1 className="home-input-quick-task-description">
-                                                {task.description}
-                                            </Body1>
-                                        </div>
-                                    </div>
-                                </Card>
+                                    title={task.title}
+                                    icon={task.icon}
+                                    description={task.description}
+                                    onClick={() => handleQuickTaskClick(task)}
+                                />
                             ))}
                         </div>
                     </div>

src/frontend_react/src/coral/components/CoralAccordion/CoralAccordion.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CoralAccordion: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div>{children}</div>; // Just a semantic wrapper
+};
+
+export default CoralAccordion;

src/frontend_react/src/coral/components/CoralAccordion/CoralAccordionContext.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+export const CoralAccordionContext = createContext<{
+  open: boolean;
+  toggle: () => void;
+} | null>(null);
+
+export const useCoralAccordion = () => {
+  const ctx = useContext(CoralAccordionContext);
+  if (!ctx) throw new Error("Must be used inside CoralAccordionItem");
+  return ctx;
+};

src/frontend_react/src/coral/components/CoralAccordion/CoralAccordionHeader.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Body1 } from "@fluentui/react-components";
+import { ChevronDown20Regular } from "@fluentui/react-icons";
+import { useCoralAccordion } from "./CoralAccordionContext";
+
+type Props = {
+  children: React.ReactNode;
+  height?: string;
+  chevron?: boolean;
+};
+
+const CoralAccordionHeader: React.FC<Props> = ({
+  children,
+  height = "32px",
+  chevron = false,
+}) => {
+  const { open, toggle } = useCoralAccordion();
+
+  return (
+    <div
+      onClick={toggle}
+      style={{
+        color: "var(--colorNeutralForeground3)",
+        padding: "0px 16px 0px 16px",
+        backgroundColor: "transparent",
+        cursor: "pointer",
+        justifyContent: "space-between",
+        display: "flex",
+        alignItems: "center",
+        height: '40px',
+      }}
+    >
+      <Body1>{children}</Body1>
+      {chevron && (
+        <span
+          style={{
+            display: "flex",
+            transition: "transform 0.25s ease",
+            transform: open ? "rotate(-180deg)" : "rotate(0deg)",
+          }}
+        >
+          <ChevronDown20Regular />
+        </span>
+      )}
+    </div>
+  );
+};
+
+CoralAccordionHeader.displayName = "CoralAccordionHeader";
+export default CoralAccordionHeader;

src/frontend_react/src/coral/components/CoralAccordion/CoralAccordionItem.tsx

@@ -0,0 +1,36 @@
+import React, { useState, cloneElement, isValidElement } from "react";
+import { CoralAccordionContext } from "./CoralAccordionContext";
+
+type CoralAccordionItemProps = {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+};
+
+const CoralAccordionItem: React.FC<CoralAccordionItemProps> = ({
+  defaultOpen = false,
+  children,
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+  const toggle = () => setOpen((prev) => !prev);
+
+  return (
+    <CoralAccordionContext.Provider value={{ open, toggle }}>
+      {React.Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+
+        const type =
+          (child.type as any)?.displayName || (child.type as any)?.name || "";
+
+        // Show CoralAccordionPanel only if open
+        if (type === "CoralAccordionPanel") {
+          return open ? child : null;
+        }
+
+        // Render all other children (e.g., CoralAccordionHeader)
+        return child;
+      })}
+    </CoralAccordionContext.Provider>
+  );
+};
+
+export default CoralAccordionItem;

src/frontend_react/src/coral/components/CoralAccordion/CoralAccordionPanel.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CoralAccordionPanel: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div style={{ margin: "8px" }}>{children}</div>;
+};
+
+export default CoralAccordionPanel;

src/frontend_react/src/coral/components/Panels/PanelFooter.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const PanelFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div
+      style={{
+        padding: "24px 16px",
+        width:'100%'
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+PanelFooter.displayName = "PanelFooter";
+
+export default PanelFooter;

src/frontend_react/src/coral/components/Panels/PanelLeft.tsx

@@ -1,5 +1,12 @@
-import React, { useState, useEffect, ReactNode, ReactElement } from "react";
-import PanelToolbar from "./PanelLeftToolbar.js"; // Import to identify toolbar
+import React, {
+  useState,
+  useEffect,
+  ReactNode,
+  ReactElement,
+  isValidElement,
+} from "react";
+import PanelToolbar from "./PanelLeftToolbar.js";
+import PanelFooter from "./PanelFooter"; // 👈 new
 import {
   Avatar,
   Body1,
@@ -43,24 +50,27 @@ const PanelLeft: React.FC<PanelLeftProps> = ({
     const onMouseUp = () => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
-
-      // Re-enable text selection
       document.body.style.userSelect = "";
     };
 
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
-
-    // Disable text selection
     document.body.style.userSelect = "none";
   };
 
   const childrenArray = React.Children.toArray(children) as ReactElement[];
   const toolbar = childrenArray.find(
-    (child) => React.isValidElement(child) && child.type === PanelToolbar
+    (child) => isValidElement(child) && child.type === PanelToolbar
+  );
+  const footer = childrenArray.find(
+    (child) => isValidElement(child) && child.type === PanelFooter
   );
   const content = childrenArray.filter(
-    (child) => !(React.isValidElement(child) && child.type === PanelToolbar)
+    (child) =>
+      !(
+        isValidElement(child) &&
+        (child.type === PanelToolbar || child.type === PanelFooter)
+      )
   );
 
   return (
@@ -90,12 +100,13 @@ const PanelLeft: React.FC<PanelLeftProps> = ({
           overflowY: "auto",
           overflowX: "hidden",
           boxSizing: "border-box",
-          // padding: "16px",
         }}
       >
         {content}
       </div>
 
+      {footer && <div>{footer}</div>}
+
       {panelResize && (
         <div
           className="resizeHandle"
@@ -116,28 +127,6 @@ const PanelLeft: React.FC<PanelLeftProps> = ({
           }}
         />
       )}
-
-      <div
-        style={{
-          display: "flex",
-          padding: "24px 16px",
-          gap: "12px",
-          alignItems: "center",
-        }}
-      >
-        <Avatar
-          name="Pepper Hayuki"
-          image={{
-            src: Human,
-          }}
-        />
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <Body1Strong>Pepper Hayuki</Body1Strong>
-          <Caption1 style={{ color: "var(--colorNeutralForeground3)" }}>
-            pepperhayuki@microsoft.com
-          </Caption1>
-        </div>
-      </div>
     </div>
   );
 };

src/frontend_react/src/coral/components/Panels/UserCard.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {
+  Avatar,
+  AvatarProps,
+  Body1Strong,
+  Caption1,
+} from "@fluentui/react-components";
+
+interface PanelUserCardProps extends AvatarProps {
+  name: string;       // required for both Avatar and label
+  alias?: string;     // optional sub-label
+}
+
+const PanelUserCard: React.FC<PanelUserCardProps> = ({ name, alias, ...avatarProps }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        gap: "12px",
+        alignItems: "center",
+      }}
+    >
+      <Avatar
+        name={name}
+        {...avatarProps}
+      />
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <Body1Strong>{name}</Body1Strong>
+        {alias && (
+          <Caption1 style={{ color: "var(--colorNeutralForeground3)" }}>
+            {alias}
+          </Caption1>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PanelUserCard;

src/frontend_react/src/coral/components/PromptCard.tsx

@@ -0,0 +1,66 @@
+// PromptCard.tsx
+import React from "react";
+import { Card } from "@fluentui/react-components";
+import { Body1, Body1Strong } from "@fluentui/react-components";
+
+type PromptCardProps = {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+};
+
+const PromptCard: React.FC<PromptCardProps> = ({
+  title,
+  description,
+  icon,
+  onClick,
+}) => {
+  return (
+    <Card
+      onClick={onClick}
+      style={{
+        flex: "1",
+        display: "flex",
+        flexDirection: "column",
+        padding: "16px",
+        backgroundColor: "var(--colorNeutralBackground3)",
+        border: "1px solid var(--colorNeutralStroke2)",
+        borderRadius: "8px",
+        cursor: "pointer",
+        boxShadow: "none",
+        transition: "background-color 0.2s ease-in-out",
+      }}
+      onMouseOver={(e) =>
+        (e.currentTarget.style.backgroundColor =
+          "var(--colorNeutralBackground4Hover)")
+      }
+      onMouseOut={(e) =>
+        (e.currentTarget.style.backgroundColor =
+          "var(--colorNeutralBackground3)")
+      }
+    >
+      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+        {icon && (
+          <div
+            style={{
+              fontSize: "20px",
+              color: "var(--colorBrandForeground1)",
+              marginTop: "2px",
+            }}
+          >
+            {icon}
+          </div>
+        )}
+        <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+          <Body1Strong>{title}</Body1Strong>
+          <Body1 style={{ color: "var(--colorNeutralForeground3)" }}>
+            {description}
+          </Body1>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default PromptCard;