suvir slider

Author: oshaikh13

src/components/DemoPage.jsx

@@ -277,7 +277,7 @@ if __name__ == "__main__":
           margin: '0',
           fontSize: '15px'
         }}>
-          We create a new class of proactive assistants (GUMBOs) that discover and execute useful suggestions on a user's behalf based on the their GUM.
+          Any application that might rely on unstructured user context could benefit from a GUM. We create a new class of proactive assistants (GUMBOs) that discover and execute useful suggestions on a user's behalf based on the their GUM. GUMBO discovers helpful suggestions, determines if a suggestion is worth showing to a user and executing, and then executes the (sandboxed) suggestion to the best of its ability---sharing preliminary results with the user.
         </p>
       </div>
 

src/components/LeftPane.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { FaInbox, FaFileExcel, FaPencilAlt, FaUtensils, FaPaintBrush, FaBriefcase } from 'react-icons/fa';
 
 /* ──────── GIF imports ──────── */
 import inboxclipGif from './gifs/inboxclips.gif';
@@ -17,8 +18,17 @@ const gifMap = {
   'jobclip.gif'   : jobclipGif,
 };
 
+const sliderIcons = [
+  { icon: FaInbox, value: 1, key: 'inbox' },
+  { icon: FaFileExcel, value: 2, key: 'excel' },
+  { icon: FaPencilAlt, value: 3, key: 'essay' },
+  { icon: FaUtensils, value: 4, key: 'lunch' },
+  { icon: FaPaintBrush, value: 5, key: 'figma' },
+  { icon: FaBriefcase, value: 6, key: 'job' },
+];
+
 /* ──────── Slider ──────── */
-function FancySlider({ min, max, step, value, onChange }) {
+function FancySlider({ min, max, step, value, onChange, icons }) {
   const sliderRef = React.useRef(null);
   const [isDragging, setIsDragging] = useState(false);
 
@@ -51,26 +61,55 @@ function FancySlider({ min, max, step, value, onChange }) {
   }, [isDragging, min, max, step, onChange]);
 
   const ratio = (value - min) / (max - min);
+  const iconSize = 20; // Size of the icon for positioning calculations
 
   return (
-    <div ref={sliderRef} style={{ position:'relative', width:'100%', height:20 }}>
-      <div style={{
-        position:'absolute', top:'50%', left:0, transform:'translateY(-50%)',
-        width:'100%', height:4, background:'rgba(214,206,186,.3)', borderRadius:2
-      }}/>
-      <div style={{
-        position:'absolute', top:'50%', left:0, transform:'translateY(-50%)',
-        width:`${ratio*100}%`, height:4, background:'#d6ceba', borderRadius:2
-      }}/>
-      <div
-        onMouseDown={e => { e.preventDefault(); setIsDragging(true); }}
-        onTouchStart={() => setIsDragging(true)}
-        style={{
-          position:'absolute', top:'50%', left:`calc(${ratio*100}% - 10px)`,
-          transform:'translateY(-50%)', width:20, height:20, borderRadius:'50%',
-          background:'#d6ceba', cursor:'pointer'
-        }}
-      />
+    <div style={{ position: 'relative', width: '100%', height: 40 /* Increased height for icons */ }}>
+      <div ref={sliderRef} style={{ position:'relative', width:'100%', height:20, marginTop: 15 /* Make space for icons above */ }}>
+        <div style={{
+          position:'absolute', top:'50%', left:0, transform:'translateY(-50%)',
+          width:'100%', height:4, background:'rgba(214,206,186,.3)', borderRadius:2
+        }}/>
+        <div style={{
+          position:'absolute', top:'50%', left:0, transform:'translateY(-50%)',
+          width:`${ratio*100}%`, height:4, background:'#d6ceba', borderRadius:2
+        }}/>
+        <div
+          onMouseDown={e => { e.preventDefault(); setIsDragging(true); }}
+          onTouchStart={() => setIsDragging(true)}
+          style={{
+            position:'absolute', top:'50%', left:`calc(${ratio*100}% - 10px)`,
+            transform:'translateY(-50%)', width:20, height:20, borderRadius:'50%',
+            background:'#d6ceba', cursor:'pointer', zIndex: 2
+          }}
+        />
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', position: 'absolute', top: 0 }}>
+        {icons.map((iconData) => {
+          const IconComponent = iconData.icon;
+          const iconRatio = (iconData.value - min) / (max - min);
+          const isActive = iconData.value === value;
+          return (
+            <div
+              key={iconData.key}
+              onClick={() => onChange(iconData.value)}
+              style={{
+                position: 'absolute',
+                left: `calc(${iconRatio * 100}% - ${iconSize / 2}px)`,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                cursor: 'pointer',
+                zIndex: 1,
+                color: isActive ? '#d6ceba' : 'rgba(214,206,186,.5)',
+                fontSize: `${iconSize}px`
+              }}
+              title={iconData.key.charAt(0).toUpperCase() + iconData.key.slice(1)} // Tooltip for accessibility
+            >
+              <IconComponent />
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }
@@ -98,15 +137,13 @@ const LeftPane = ({ selectedHour, onTimeChange, activity, gif }) => {
           alt={activity}
           style={{ width:'100%', height:'auto', objectFit:'contain', display:'block', margin: '0 auto' }}
         />
-        <p style={{ margin:'15px 0 10px', fontSize:16 }}><b>{activity}</b></p>
+        <p style={{ margin:'15px 0 15px', fontSize:16 }}><b>{activity}</b></p>
       </div>
 
       {/* Hour selector */}
       <div style={{ width:200, margin:'0 auto' }}>
         <div style={{ display:'flex', alignItems:'center', gap:20 }}>
-          <span style={{ fontSize:14 }}>Start</span>
-          <FancySlider min={1} max={6} step={1} value={selectedHour} onChange={onTimeChange} />
-          <span style={{ fontSize:14 }}>End</span>
+          <FancySlider min={1} max={6} step={1} value={selectedHour} onChange={onTimeChange} icons={sliderIcons} />
         </div>
       </div>
     </div>