refactor: add full date in rewind AI panel

EzraEllette · Jan 27, 2025 · fb73e06 · fb73e06
1 parent e002924
commit fb73e06
Show file tree

Hide file tree

Showing 4 changed files with 373 additions and 15 deletions.
diff --git a/pipes/rewind/src/app/page.tsx b/pipes/rewind/src/app/page.tsx
@@ -10,6 +10,7 @@ import { AGENTS } from "@/components/timeline/agents";
 import { TimelineSelection } from "@/components/timeline/timeline-selection";
 import { TimelineControls } from "@/components/timeline/timeline-controls";
 import { TimelineSearch } from "@/components/timeline/timeline-search";
+import { TimelineSearch2 } from "@/components/timeline/timeline-search-v2";
 
 export interface StreamTimeSeriesResponse {
   timestamp: string;
@@ -71,6 +72,7 @@ export default function Timeline() {
     y: 0,
   });
   const [currentDate, setCurrentDate] = useState(new Date());
+  const [searchResults, setSearchResults] = useState<number[]>([]);
 
   useEffect(() => {
     setAiPanelPosition({
@@ -459,12 +461,11 @@ export default function Timeline() {
               onJumpToday={handleJumpToday}
               className="shadow-lg"
             />
-            <TimelineSearch
+            {/* <TimelineSearch2
               frames={frames}
-              onResultSelect={(index) => {
-                animateToIndex(index);
-              }}
-            />
+              onResultSelect={animateToIndex}
+              onSearchResults={setSearchResults}
+            /> */}
           </div>
         </div>
 
@@ -520,13 +521,19 @@ export default function Timeline() {
         </div>
 
         <div className="w-4/5 mx-auto my-8 relative select-none">
-          <div className="h-[60px] bg-card border rounded-lg shadow-sm cursor-crosshair relative">
+          <div
+            className="h-[60px] bg-card border rounded-lg shadow-sm cursor-crosshair relative overflow-hidden"
+            style={{
+              width: "100%",
+              boxSizing: "border-box",
+            }}
+          >
             {loadedTimeRange && (
               <TimelineSelection loadedTimeRange={loadedTimeRange} />
             )}
             <div
-              className="absolute top-0 h-full w-1 bg-foreground/50 shadow-sm opacity-80 z-10"
-              style={{ left: `${timePercentage}%` }}
+              className="absolute top-0 h-full w-1 bg-foreground/50 shadow-sm opacity-80"
+              style={{ left: `${timePercentage}%`, zIndex: 5 }}
             >
               <div className="relative -top-6 right-3 text-[10px] text-muted-foreground whitespace-nowrap">
                 {currentIndex < frames.length &&
@@ -551,6 +558,31 @@ export default function Timeline() {
                   })()}
               </div>
             </div>
+
+            {searchResults.map((frameIndex) => {
+              const percentage = (frameIndex / (frames.length - 1)) * 100;
+              return (
+                <div
+                  key={frameIndex}
+                  className="absolute top-0 h-full w-1.5 bg-blue-500/50 hover:bg-blue-500 cursor-pointer transition-colors"
+                  style={{ left: `${percentage}%`, zIndex: 4 }}
+                  onClick={() => {
+                    animateToIndex(frameIndex);
+                    setSearchResults([]); // Clear results after clicking
+                  }}
+                >
+                  <div className="absolute -top-6 -left-2 text-[10px] text-blue-500 whitespace-nowrap">
+                    {new Date(frames[frameIndex].timestamp).toLocaleTimeString(
+                      [],
+                      {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      }
+                    )}
+                  </div>
+                </div>
+              );
+            })}
           </div>
 
           <AIPanel

diff --git a/pipes/rewind/src/components/timeline/ai-panel.tsx b/pipes/rewind/src/components/timeline/ai-panel.tsx
@@ -297,8 +297,21 @@ export function AIPanel({
           <div className="flex items-center gap-2 flex-1">
             <GripHorizontal className="w-4 h-4 text-muted-foreground group-hover:text-foreground" />
             <div className="text-muted-foreground text-xs">
-              {new Date(selectionRange.start.getTime()).toLocaleTimeString()} -{" "}
-              {new Date(selectionRange.end.getTime()).toLocaleTimeString()}
+              {new Date(selectionRange.start).toLocaleString([], {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+              })}
+              {" - "}
+              {new Date(selectionRange.end).toLocaleString([], {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+              })}
             </div>
           </div>
           <button
@@ -333,7 +346,7 @@ export function AIPanel({
       {isExpanded && (
         <div className="flex flex-col h-[calc(100%-52px)]">
           <div
-            className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0 hover:cursor-auto text-foreground font-mono text-sm leading-relaxed"
+            className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0 hover:cursor-auto text-foreground font-mono text-sm leading-relaxed "
             style={{
               WebkitUserSelect: "text",
               userSelect: "text",
@@ -342,6 +355,8 @@ export function AIPanel({
               overscrollBehavior: "contain",
               overflowY: "scroll",
               height: "100%",
+              maxWidth: "100%",
+              boxSizing: "border-box",
             }}
           >
             {chatMessages.map((msg, index) => (