feat: settings UI

.gitignore

@@ -12,9 +12,6 @@ dist/
 
 .idea/
 
-data/*
-!data/.gitkeep
-
 selfie/web/
 
-*.env
+*.env

selfie-ui/src/app/components/Playground/NoDocumentsBanner.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface Props {
+  documents: any[];
+}
+
+const NoDocumentsBanner: React.FC<Props> = ({ documents }) => {
+  if (documents.length === 0) {
+    return (
+      <div role="alert" className="alert alert-info mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+             className="stroke-current shrink-0 w-6 h-6">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <div>
+          <h3 className="font-bold">No data found</h3>
+          <div className="text-xs">Add some documents with the <a href="/#addData" className="link">Add Data</a> page to get
+            started.
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+NoDocumentsBanner.displayName = 'NoDocumentsBanner'
+
+export default NoDocumentsBanner;

selfie-ui/src/app/components/Playground/Playground.tsx

@@ -1,10 +1,28 @@
+import React, { useEffect, useState } from 'react';
 import PlaygroundChat from "./PlaygroundChat";
 import PlaygroundQuery from "./PlaygroundQuery";
+import NoDocumentsBanner from "./NoDocumentsBanner";
+import { apiBaseUrl } from "@/app/config";
 
 const Playground = () => {
+  const [documents, setDocuments] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await fetch(`${apiBaseUrl}/v1/documents`);
+        const data = await response.json();
+        setDocuments(data);
+      } catch (error) {
+        console.error("Error fetching documents:", error);
+      }
+    })();
+  }, []);
+
   return (
     <>
-      <PlaygroundChat />
+      <NoDocumentsBanner documents={documents} />
+      <PlaygroundChat hasIndexedDocuments={documents.length > 0} />
       <div className="h-4" />
       <PlaygroundQuery />
     </>

selfie-ui/src/app/components/Playground/PlaygroundQuery.tsx

@@ -114,67 +114,19 @@ const PlaygroundQuery = () => {
       <div className="flex flex-col lg:flex-row gap-4">
         <div className="lg:w-1/2">
           <form className="form max-w-full" onSubmit={handleQuery}>
-            <div className="form-control mb-2">
-              {/*<label className="label">*/}
-              {/*<span className="label-text">Limit</span>*/}
-              {/*</label>*/}
+            <label className="input input-bordered flex items-center gap-2">
               <input
-                type="number"
-                className="input input-sm input-bordered"
-                placeholder="Number of documents (optional)"
-                value={limit === undefined ? "" : limit}
-                onChange={(e) => setLimit(Number(e.target.value) || undefined)}
-                min="1"
-              />
-            </div>
-
-            <div className="form-control">
-              {/*<label className="label">*/}
-              {/*  <span className="label-text">Minimum Score</span>*/}
-              {/*</label>*/}
-              <input
-                type="number"
-                className="input input-sm input-bordered"
-                placeholder="Minimum score (optional)"
-                value={minScore === undefined ? "" : minScore}
-                onChange={(e) => setMinScore(Number(e.target.value) || undefined)}
-                min="0"
-                max="1"
-                step="0.01"
-              />
-            </div>
-
-            <div className="form-control mb-2">
-              {/*<label className="label">*/}
-              {/*  <span className="label-text">Relevance Weight</span>*/}
-              {/*</label>*/}
-              <input
-                type="number"
-                className="input input-sm input-bordered"
-                value={relevanceWeight === undefined ? "" : relevanceWeight}
-                placeholder="Relevance weight (optional)"
-                onChange={(e) => setRelevanceWeight(e.target.value ? Number(e.target.value) : undefined)}
-                min="0"
-                max="1"
-                step="0.01"
-              />
-            </div>
-
-            <div className="form-control mb-2">
-              {/*<label className="label">*/}
-              {/*  <span className="label-text">Recency Weight</span>*/}
-              {/*</label>*/}
-              <input
-                type="number"
-                className="input input-sm input-bordered"
-                value={recencyWeight === undefined ? "" : recencyWeight}
-                placeholder="Recency weight (optional)"
-                onChange={(e) => setRecencyWeight(e.target.value ? Number(e.target.value) : undefined)}
-                min="0"
-                max="1"
-                step="0.01"
+                disabled={isTaskRunning}
+                type="text"
+                className="grow bg-base-100"
+                placeholder="E.g. favorite snacks"
+                value={query}
+                onChange={handleQueryChange}
               />
-            </div>
+              {/*<button type="submit">*/}
+              {/*  {isSummaryLoading ? <LoadingIcon/> : <SearchIcon/>}*/}
+              {/*</button>*/}
+            </label>
 
             <div className="form-control">
               <label className="label cursor-pointer flex gap-2 items-center">
@@ -188,19 +140,80 @@ const PlaygroundQuery = () => {
               </label>
             </div>
 
-            <label className="input input-bordered flex items-center gap-2 mb-4">
-              <input
-                disabled={isTaskRunning}
-                type="text"
-                className="grow bg-base-100"
-                placeholder="Search for anything..."
-                value={query}
-                onChange={handleQueryChange}
-              />
-              <button type="submit" className="button">
-                {isSummaryLoading ? <LoadingIcon /> : <SearchIcon />}
-              </button>
-            </label>
+
+            <div className="collapse collapse-arrow collapse-xs bg-base-200 mb-4">
+              <input type="checkbox"/>
+              <div className="collapse-title">
+                Advanced options
+              </div>
+              <div className="collapse-content flex flex-col gap-2">
+                <div className="form-control">
+                  {/*<label className="label">*/}
+                  {/*<span className="label-text">Limit</span>*/}
+                  {/*</label>*/}
+                  <input
+                    type="number"
+                    className="input input-sm input-bordered"
+                    placeholder="Maximum number of documents"
+                    value={limit === undefined ? "" : limit}
+                    onChange={(e) => setLimit(Number(e.target.value) || undefined)}
+                    min="1"
+                  />
+                </div>
+
+                <div className="form-control">
+                  {/*<label className="label">*/}
+                  {/*  <span className="label-text">Minimum Score</span>*/}
+                  {/*</label>*/}
+                  <input
+                    type="number"
+                    className="input input-sm input-bordered"
+                    placeholder="Minimum score (0.0 to 1.0)"
+                    value={minScore === undefined ? "" : minScore}
+                    onChange={(e) => setMinScore(Number(e.target.value) || undefined)}
+                    min="0"
+                    max="1"
+                    step="0.01"
+                  />
+                </div>
+
+                <div className="form-control">
+                  {/*<label className="label">*/}
+                  {/*  <span className="label-text">Relevance Weight</span>*/}
+                  {/*</label>*/}
+                  <input
+                    type="number"
+                    className="input input-sm input-bordered"
+                    value={relevanceWeight === undefined ? "" : relevanceWeight}
+                    placeholder="Relevance weight (0.0 to 1.0)"
+                    onChange={(e) => setRelevanceWeight(e.target.value ? Number(e.target.value) : undefined)}
+                    min="0"
+                    max="1"
+                    step="0.01"
+                  />
+                </div>
+
+                <div className="form-control">
+                  {/*<label className="label">*/}
+                  {/*  <span className="label-text">Recency Weight</span>*/}
+                  {/*</label>*/}
+                  <input
+                    type="number"
+                    className="input input-sm input-bordered"
+                    value={recencyWeight === undefined ? "" : recencyWeight}
+                    placeholder="Recency weight (0.0 to 1.0)"
+                    onChange={(e) => setRecencyWeight(e.target.value ? Number(e.target.value) : undefined)}
+                    min="0"
+                    max="1"
+                    step="0.01"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <button type="submit" className="btn btn-primary btn-block">
+              Submit
+            </button>
           </form>
         </div>
         {!!summary && (