[FEAT] 868 Meta Response (dynamic input)

README.md

@@ -49,6 +49,7 @@ Some cool features of AnythingLLM
 
 - **Multi-user instance support and permissioning**
 - **_New_** [Custom Embeddable Chat widget for your website](./embed/README.md)
+- **_New_** [Contextually aware Meta Input fields for intuitive chat experience - best for Active Prompting](./frontend/src/components/WorkspaceChat/ChatContainer/MetaInputs/README.md)
 - Multiple document type support (PDF, TXT, DOCX, etc)
 - Manage documents in your vector database from a simple UI
 - Two chat modes `conversation` and `query`. Conversation retains previous questions and amendments. Query is simple QA against your documents

frontend/src/components/Generic/Badges/Badge/index.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+
+// Updated utility function for dark theme
+const colorMapping = (bg) => {
+  const mappings = {
+    "bg-green-500": {
+      text: "text-green-400",
+      icon: "text-green-600 group-hover:text-green-50",
+      ring: "ring-1 ring-inset ring-green-500/20",
+    },
+  };
+
+  return (
+    mappings[bg] || {
+      text: "text-white/60",
+      icon: "text-white/80 group-hover:text-white/50",
+      ring: "ring-1 ring-inset ring-gray-500/20",
+    }
+  );
+};
+
+// Badge Component
+
+export default function Badge({
+  label = "Beta",
+  size = "sm", // "sm", "md", "lg" or "xl"
+  rounded = "full", // "none", "sm", "md", "lg", "full"
+  shadow = "none", // "none", "sm", "md", "lg", "xl"
+  showDot = false,
+  showClose = false,
+  bg = "bg-green-500",
+  animated = false,
+  active = false,
+  onClose = () => {}, // Callback for close icon
+  onSelect = () => {}, // Callback for badge click
+  onDoubleClick = () => {}, // Callback for badge double click
+}) {
+  const {
+    text: textColor,
+    icon: iconColor,
+    ring: ringClasses,
+  } = colorMapping(bg);
+  const animatedClasses = animated ? "animate-pulse" : "";
+  const sizeClasses = {
+    sm: "py-0.5 px-2 pr-0.5 text-xs",
+    md: "py-1.5 px-2 pr-1 text-xs",
+    lg: "py-2 px-3 text-sm",
+    xl: "py-2.5 px-4 text-base",
+  }[size];
+  const iconSizeClasses = {
+    sm: "h-2 w-2",
+    md: "h-3 w-3",
+    lg: "h-4 w-4",
+    xl: "h-4 w-4",
+  }[size];
+  const roundedClasses = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full",
+  }[rounded];
+  const shadowClasses = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+  }[shadow];
+  const backgroundClasses = `${bg} ${
+    active ? "bg-opacity-20" : "bg-opacity-10"
+  } hover:bg-opacity-30`;
+
+  // SVG Icons
+  const DotIcon = () => (
+    <svg
+      viewBox="0 0 8 8"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${iconSizeClasses} ${iconColor} ${animatedClasses}`}
+    >
+      <circle cx="4" cy="4" r="4" />
+    </svg>
+  );
+
+  const CloseIcon = () => (
+    <svg
+      viewBox="0 0 12 12"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${iconSizeClasses} ${iconColor}`}
+    >
+      <path d="M6 4.586L2.929 1.515 1.515 2.929 4.586 6l-3.071 3.071 1.414 1.414L6 7.414l3.071 3.071 1.414-1.414L7.414 6l3.071-3.071-1.414-1.414L6 4.586z" />
+    </svg>
+  );
+
+  return (
+    <div
+      className={`flex flex-row gap-0.5 w-fit h-fit  justify-center items-center cursor-pointer select-none group ${sizeClasses} ${backgroundClasses} ${roundedClasses} ${shadowClasses} ${ringClasses}`}
+      onDoubleClick={onDoubleClick}
+      onClick={onSelect}
+    >
+      {showDot && (
+        <div>
+          <DotIcon />
+        </div>
+      )}
+      <p className={`block text-center font-medium pr-2 pl-1  ${textColor}`}>
+        {label}
+      </p>
+      {showClose && (
+        <div
+          className="flex flex-row justify-start items-start p-1 rounded-lg cursor-pointer z-10"
+          onClick={onClose}
+        >
+          <CloseIcon className="p1" />
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/Generic/Blocks/CheckBoxBlock/index.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Badge from "@/components/Generic/Badges/Badge";
+import CheckBox from "../../Inputs/CheckBox";
+
+export default function CheckBoxBlock({
+  initialChecked,
+  label,
+  onToggle,
+  description,
+  name,
+  badge = false,
+  badgeLabel,
+  badgeAnimated,
+  badgeBg,
+  border,
+  Icon,
+  disabled,
+  inline = false,
+}) {
+  const borderStyle = border ? "border border-gray-600 rounded-2xl p-4" : "";
+
+  return (
+    <div className={`relative w-full max-h-full ${borderStyle}`}>
+      <div className="relative rounded-lg">
+        <div className="space-y-6 flex h-full w-full">
+          <div className="w-full flex flex-col gap-y-4">
+            <div className="flex gap-4">
+              {Icon && (
+                <Icon className="w-16 h-16 text-white text-opacity-60" />
+              )}
+              <div>
+                <div className="flex flex-row gap-4">
+                  {inline && (
+                    <div>
+                      <CheckBox
+                        initialChecked={initialChecked}
+                        onToggle={onToggle}
+                        name={name}
+                        disabled={disabled}
+                      />
+                    </div>
+                  )}
+                  <label className="block  input-label mb-4 first-letter:capitalize">
+                    {label}
+                  </label>
+                  {badge && (
+                    <Badge
+                      showDot
+                      animated={badgeAnimated}
+                      label={badgeLabel}
+                      bg={badgeBg}
+                    />
+                  )}
+                </div>
+                {!inline && (
+                  <CheckBox
+                    initialChecked={initialChecked}
+                    onToggle={onToggle}
+                    name={name}
+                    disabled={disabled}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-between space-x-14">
+          <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Generic/Blocks/TextAreaBlock/index.jsx

@@ -0,0 +1,51 @@
+import TextArea from "../../Inputs/TextArea";
+
+export default function TextAreaBlock({
+  label,
+  description,
+  defaultValue,
+  required,
+  placeholder,
+  onChange,
+  name,
+  disabled,
+  initialRows,
+  className,
+  autoComplete,
+  wrap,
+  code,
+  onSave,
+  value,
+}) {
+  return (
+    <div>
+      <div className="flex flex-col">
+        {label && (
+          <label htmlFor="name" className="block input-label">
+            {label}
+          </label>
+        )}
+        {description && (
+          <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+            {description}
+          </p>
+        )}
+      </div>
+      <TextArea
+        defaultValue={defaultValue}
+        value={value}
+        required={required}
+        placeholder={placeholder}
+        onChange={onChange}
+        name={name}
+        disabled={disabled}
+        initialRows={initialRows}
+        className={className}
+        autoComplete={autoComplete}
+        wrap={wrap}
+        code={code}
+        onSave={onSave}
+      />
+    </div>
+  );
+}

frontend/src/components/Generic/Blocks/TitleBlock/index.jsx

@@ -0,0 +1,64 @@
+import Badge from "@/components/Generic/Badges/Badge";
+import React from "react";
+
+export default function TitleBlock({
+  content, // toggle content goes here
+  label,
+  description,
+  badge = false,
+  badgeLabel,
+  badgeAnimated,
+  badgeBg,
+  border,
+  bg,
+  Icon,
+  labelStyles,
+  divider,
+}) {
+  const borderStyle = border ? "border border-gray-600 rounded-2xl p-4" : "";
+  const backgroundStyle = bg ? "bg-black/10" : "";
+  const dividerStyle = divider
+    ? "pb-4 mb-8 border-white/10 border-b-2"
+    : "pb-2";
+
+  return (
+    <div
+      className={`relative w-full max-h-full flex flex-col gap-y-1  ${dividerStyle}  ${borderStyle} ${backgroundStyle}`}
+    >
+      <div className="relative rounded-lg ">
+        <div className="space-y-6 flex h-full w-full">
+          <div className="w-full flex flex-col gap-y-4">
+            <div className={`flex ${Icon ? "gap-4" : ""}`}>
+              {Icon && <Icon className="w-9 h-9  text-white/30" />}
+              <div>
+                <div className="flex flex-row gap-4">
+                  {label && (
+                    <label
+                      className={`block ${
+                        labelStyles ? labelStyles : "input-label"
+                      }  mb-2.5 first-letter:capitalize `}
+                    >
+                      {label}
+                    </label>
+                  )}
+                  {badge && (
+                    <Badge
+                      showDot
+                      animated={badgeAnimated}
+                      label={badgeLabel}
+                      bg={badgeBg}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-between space-x-14">
+          <p className="text-white/60 text-xs py-1.5">{description}</p>
+        </div>
+        {content}
+      </div>
+    </div>
+  );
+}