feature: rearrange images to display horizontally and make the section collapsable

Author: skeptrunedev

frontends/chat/src/components/ScoreChunk.tsx

@@ -1,16 +1,30 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { For, Show, createMemo, createSignal, Switch, Match } from "solid-js";
 import {
+  For,
+  Show,
+  createMemo,
+  createSignal,
+  Switch,
+  Match,
+  createEffect,
+} from "solid-js";
+import {
+  ChunkMetadata,
+  indirectHasOwnProperty,
   type ChunkBookmarksDTO,
   type ChunkCollectionDTO,
-  type ChunkMetadataWithVotes,
 } from "../utils/apiTypes";
 import { BiRegularChevronDown, BiRegularChevronUp } from "solid-icons/bi";
 import sanitizeHtml from "sanitize-html";
 import { AiOutlineCopy } from "solid-icons/ai";
-import { FiCheck, FiExternalLink } from "solid-icons/fi";
+import {
+  FiCheck,
+  FiChevronDown,
+  FiChevronUp,
+  FiExternalLink,
+} from "solid-icons/fi";
 
 export const sanitzerOptions = {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
@@ -40,7 +54,7 @@ export interface ScoreChunkProps {
   chunkCollections: ChunkCollectionDTO[];
   totalCollectionPages: number;
   collection?: boolean;
-  chunk: ChunkMetadataWithVotes;
+  chunk: ChunkMetadata;
   counter: string;
   order?: string;
   initialExpanded?: boolean;
@@ -70,6 +84,8 @@ const ScoreChunk = (props: ScoreChunkProps) => {
   const [expanded, setExpanded] = createSignal(props.initialExpanded ?? false);
   const [copied, setCopied] = createSignal(false);
   const [expandMetadata, setExpandMetadata] = createSignal(false);
+  const [showImages, setShowImages] = createSignal(true);
+  const [imageLinks, setImageLinks] = createSignal<string[] | null>(null);
 
   const copyChunk = () => {
     try {
@@ -98,6 +114,17 @@ const ScoreChunk = (props: ScoreChunkProps) => {
     }
   };
 
+  createEffect(() => {
+    if (
+      !props.chunk.metadata ||
+      !indirectHasOwnProperty(props.chunk, "image_urls")
+    ) {
+      return null;
+    }
+
+    setImageLinks(props.chunk.image_urls);
+  });
+
   const useExpand = createMemo(() => {
     if (!props.chunk.chunk_html) return false;
     return props.chunk.chunk_html.split(" ").length > 20 * linesBeforeShowMore;
@@ -202,6 +229,30 @@ const ScoreChunk = (props: ScoreChunkProps) => {
               </span>
             </div>
           </Show>
+          <Show when={imageLinks() != null}>
+            <button
+              class="mt-2 flex w-fit items-center space-x-1 rounded-md border bg-neutral-200/50 px-2 py-1 font-semibold text-magenta-500 hover:bg-neutral-200/90 dark:bg-neutral-700/60 dark:text-magenta-400"
+              onClick={() => setShowImages((prev) => !prev)}
+            >
+              <Switch>
+                <Match when={showImages()}>
+                  Collapse Images <FiChevronUp class="h-5 w-5" />
+                </Match>
+                <Match when={!showImages()}>
+                  Expand Images <FiChevronDown class="h-5 w-5" />
+                </Match>
+              </Switch>
+            </button>
+            <Show when={showImages()}>
+              <div class="my-2 flex space-x-2 overflow-x-auto rounded-md pl-2">
+                <For each={imageLinks() ?? []}>
+                  {(link) => (
+                    <img class="w-40 rounded-md" src={link ?? ""} alt={link} />
+                  )}
+                </For>
+              </div>
+            </Show>
+          </Show>
           <Show when={Object.keys(props.chunk.metadata ?? {}).length > 0}>
             <button
               class="mt-2 flex w-fit items-center space-x-1 rounded-md border bg-neutral-200/50 px-2 py-1 font-semibold text-magenta-500 hover:bg-neutral-200/90 dark:bg-neutral-700/60 dark:text-magenta-400"

frontends/chat/src/utils/apiTypes.ts

@@ -8,16 +8,15 @@ export interface ChunkMetadata {
   tag_set: string[] | null;
   tracking_id: string | null;
   time_stamp: string | null;
-  file_id: string | null;
-  file_name: string | null;
   metadata: Record<string, never> | null;
-  weight: number | null;
+  dataset_id: string;
+  weight: number;
   location: {
     lat: number;
     lon: number;
   } | null;
   num_value: number | null;
-  dataset_id: string;
+  image_urls: string[] | null;
 }
 
 export const indirectHasOwnProperty = (obj: unknown, prop: string): boolean => {

frontends/search/src/components/ScoreChunk.tsx

@@ -24,7 +24,7 @@ import {
 } from "../utils/apiTypes";
 import { BiRegularChevronDown, BiRegularChevronUp } from "solid-icons/bi";
 import BookmarkPopover from "./BookmarkPopover";
-import { FiEye } from "solid-icons/fi";
+import { FiChevronDown, FiChevronUp, FiEye } from "solid-icons/fi";
 import sanitizeHtml from "sanitize-html";
 import { FiEdit, FiTrash } from "solid-icons/fi";
 import { Tooltip } from "shared/ui";
@@ -94,6 +94,7 @@ const ScoreChunk = (props: ScoreChunkProps) => {
   const [expandMetadata, setExpandMetadata] = createSignal(
     props.defaultShowMetadata ?? false,
   );
+  const [showImages, setShowImages] = createSignal(true);
   const [imageLinks, setImageLinks] = createSignal<string[] | null>(null);
 
   createEffect(() => {
@@ -406,9 +407,32 @@ const ScoreChunk = (props: ScoreChunkProps) => {
                 </div>
               </Show>
               <Show when={imageLinks() != null}>
-                <For each={imageLinks() ?? []}>
-                  {(link) => <img class="w-40" src={link ?? ""} alt={link} />}
-                </For>
+                <button
+                  class="mt-2 flex w-fit items-center space-x-1 rounded-md border bg-neutral-200/50 px-2 py-1 font-semibold text-magenta-500 hover:bg-neutral-200/90 dark:bg-neutral-700/60 dark:text-magenta-400"
+                  onClick={() => setShowImages((prev) => !prev)}
+                >
+                  <Switch>
+                    <Match when={showImages()}>
+                      Collapse Images <FiChevronUp class="h-5 w-5" />
+                    </Match>
+                    <Match when={!showImages()}>
+                      Expand Images <FiChevronDown class="h-5 w-5" />
+                    </Match>
+                  </Switch>
+                </button>
+                <Show when={showImages()}>
+                  <div class="my-2 flex space-x-2 overflow-x-auto rounded-md pl-2">
+                    <For each={imageLinks() ?? []}>
+                      {(link) => (
+                        <img
+                          class="w-40 rounded-md"
+                          src={link ?? ""}
+                          alt={link}
+                        />
+                      )}
+                    </For>
+                  </div>
+                </Show>
               </Show>
               <Show when={Object.keys(props.chunk.metadata ?? {}).length > 0}>
                 <button