From f759fae55fb46279f7c82535c6f2d06a7bffe6d0 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 5 Sep 2024 14:10:41 +0700
Subject: [PATCH] feat: enable model dropdown search by configured model
 (#3466)

---
 web/containers/ModelDropdown/index.tsx | 256 +++++++++++--------------
 1 file changed, 109 insertions(+), 147 deletions(-)

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index d57119b13..92d8addd0 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -465,158 +465,73 @@ const ModelDropdown = ({
 
                     {engine === InferenceEngine.nitro &&
                       !isDownloadALocalModel &&
-                      showModel && (
-                        <>
-                          {!searchText.length ? (
-                            <ul className="pb-2">
-                              {featuredModel.map((model) => {
-                                const isDownloading = downloadingModels.some(
-                                  (md) => md.id === model.id
-                                )
-                                return (
-                                  <li
-                                    key={model.id}
-                                    className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
+                      showModel &&
+                      !searchText.length && (
+                        <ul className="pb-2">
+                          {featuredModel.map((model) => {
+                            const isDownloading = downloadingModels.some(
+                              (md) => md.id === model.id
+                            )
+                            return (
+                              <li
+                                key={model.id}
+                                className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
+                              >
+                                <div className="flex items-center gap-2">
+                                  <p
+                                    className="line-clamp-1 text-[hsla(var(--text-secondary))]"
+                                    title={model.name}
                                   >
-                                    <div className="flex items-center gap-2">
-                                      <p
-                                        className="line-clamp-1 text-[hsla(var(--text-secondary))]"
-                                        title={model.name}
-                                      >
-                                        {model.name}
-                                      </p>
-                                      <ModelLabel
-                                        metadata={model.metadata}
-                                        compact
-                                      />
-                                    </div>
-                                    <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
-                                      <span className="font-medium">
-                                        {toGibibytes(model.metadata.size)}
-                                      </span>
-                                      {!isDownloading ? (
-                                        <DownloadCloudIcon
-                                          size={18}
-                                          className="cursor-pointer text-[hsla(var(--app-link))]"
-                                          onClick={() => downloadModel(model)}
-                                        />
-                                      ) : (
-                                        Object.values(downloadStates)
-                                          .filter((x) => x.modelId === model.id)
-                                          .map((item) => (
-                                            <ProgressCircle
-                                              key={item.modelId}
-                                              percentage={
-                                                formatDownloadPercentage(
-                                                  item?.percent,
-                                                  {
-                                                    hidePercentage: true,
-                                                  }
-                                                ) as number
+                                    {model.name}
+                                  </p>
+                                  <ModelLabel
+                                    metadata={model.metadata}
+                                    compact
+                                  />
+                                </div>
+                                <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
+                                  <span className="font-medium">
+                                    {toGibibytes(model.metadata.size)}
+                                  </span>
+                                  {!isDownloading ? (
+                                    <DownloadCloudIcon
+                                      size={18}
+                                      className="cursor-pointer text-[hsla(var(--app-link))]"
+                                      onClick={() => downloadModel(model)}
+                                    />
+                                  ) : (
+                                    Object.values(downloadStates)
+                                      .filter((x) => x.modelId === model.id)
+                                      .map((item) => (
+                                        <ProgressCircle
+                                          key={item.modelId}
+                                          percentage={
+                                            formatDownloadPercentage(
+                                              item?.percent,
+                                              {
+                                                hidePercentage: true,
                                               }
-                                              size={100}
-                                            />
-                                          ))
-                                      )}
-                                    </div>
-                                  </li>
-                                )
-                              })}
-                            </ul>
-                          ) : (
-                            <>
-                              {filteredDownloadedModels
-                                .filter(
-                                  (x) => x.engine === InferenceEngine.nitro
-                                )
-                                .filter((x) => {
-                                  if (searchText.length === 0) {
-                                    return downloadedModels.find(
-                                      (c) => c.id === x.id
-                                    )
-                                  } else {
-                                    return x
-                                  }
-                                })
-                                .map((model) => {
-                                  const isDownloading = downloadingModels.some(
-                                    (md) => md.id === model.id
-                                  )
-                                  const isdDownloaded = downloadedModels.some(
-                                    (c) => c.id === model.id
-                                  )
-                                  return (
-                                    <li
-                                      key={model.id}
-                                      className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
-                                      onClick={() => {
-                                        if (isdDownloaded) {
-                                          onClickModelItem(model.id)
-                                        }
-                                      }}
-                                    >
-                                      <div className="flex items-center gap-2">
-                                        <p
-                                          className={twMerge(
-                                            'line-clamp-1',
-                                            !isdDownloaded &&
-                                              'text-[hsla(var(--text-secondary))]'
-                                          )}
-                                          title={model.name}
-                                        >
-                                          {model.name}
-                                        </p>
-                                        <ModelLabel
-                                          metadata={model.metadata}
-                                          compact
+                                            ) as number
+                                          }
+                                          size={100}
                                         />
-                                      </div>
-                                      <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
-                                        {!isdDownloaded && (
-                                          <span className="font-medium">
-                                            {toGibibytes(model.metadata.size)}
-                                          </span>
-                                        )}
-                                        {!isDownloading && !isdDownloaded ? (
-                                          <DownloadCloudIcon
-                                            size={18}
-                                            className="cursor-pointer text-[hsla(var(--app-link))]"
-                                            onClick={() => downloadModel(model)}
-                                          />
-                                        ) : (
-                                          Object.values(downloadStates)
-                                            .filter(
-                                              (x) => x.modelId === model.id
-                                            )
-                                            .map((item) => (
-                                              <ProgressCircle
-                                                key={item.modelId}
-                                                percentage={
-                                                  formatDownloadPercentage(
-                                                    item?.percent,
-                                                    {
-                                                      hidePercentage: true,
-                                                    }
-                                                  ) as number
-                                                }
-                                                size={100}
-                                              />
-                                            ))
-                                        )}
-                                      </div>
-                                    </li>
-                                  )
-                                })}
-                            </>
-                          )}
-                        </>
+                                      ))
+                                  )}
+                                </div>
+                              </li>
+                            )
+                          })}
+                        </ul>
                       )}
 
                     <ul className="pb-2">
                       {filteredDownloadedModels
                         .filter((x) => x.engine === engine)
                         .filter((y) => {
-                          if (localEngines.includes(y.engine)) {
+                          if (
+                            localEngines.includes(y.engine) &&
+                            !searchText.length
+                          ) {
                             return downloadedModels.find((c) => c.id === y.id)
                           } else {
                             return y
@@ -624,11 +539,17 @@ const ModelDropdown = ({
                         })
                         .map((model) => {
                           if (!showModel) return null
+                          const isDownloading = downloadingModels.some(
+                            (md) => md.id === model.id
+                          )
+                          const isdDownloaded = downloadedModels.some(
+                            (c) => c.id === model.id
+                          )
                           return (
                             <li
                               key={model.id}
                               className={twMerge(
-                                'cursor-pointer px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
+                                'flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
                                 !apiKey
                                   ? 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
                                   : 'text-[hsla(var(--text-primary))]'
@@ -639,13 +560,54 @@ const ModelDropdown = ({
                                   !localEngines.includes(model.engine)
                                 )
                                   return null
-                                onClickModelItem(model.id)
+                                if (isdDownloaded) {
+                                  onClickModelItem(model.id)
+                                }
                               }}
                             >
-                              <div className="flex flex-shrink-0 gap-x-2">
-                                <p className="line-clamp-1 " title={model.name}>
+                              <div className="flex gap-x-2">
+                                <p
+                                  className={twMerge(
+                                    'line-clamp-1',
+                                    !isdDownloaded &&
+                                      'text-[hsla(var(--text-secondary))]'
+                                  )}
+                                  title={model.name}
+                                >
                                   {model.name}
                                 </p>
+                                <ModelLabel metadata={model.metadata} compact />
+                              </div>
+                              <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
+                                {!isdDownloaded && (
+                                  <span className="font-medium">
+                                    {toGibibytes(model.metadata.size)}
+                                  </span>
+                                )}
+                                {!isDownloading && !isdDownloaded ? (
+                                  <DownloadCloudIcon
+                                    size={18}
+                                    className="cursor-pointer text-[hsla(var(--app-link))]"
+                                    onClick={() => downloadModel(model)}
+                                  />
+                                ) : (
+                                  Object.values(downloadStates)
+                                    .filter((x) => x.modelId === model.id)
+                                    .map((item) => (
+                                      <ProgressCircle
+                                        key={item.modelId}
+                                        percentage={
+                                          formatDownloadPercentage(
+                                            item?.percent,
+                                            {
+                                              hidePercentage: true,
+                                            }
+                                          ) as number
+                                        }
+                                        size={100}
+                                      />
+                                    ))
+                                )}
                               </div>
                             </li>
                           )