victor HF staff commited on
Commit
9d7a9c3
1 Parent(s): 0c4cf03

Web search details: ui update (#277)

Browse files

* update ui

misc improvements

* scale icon

* padding

src/lib/components/OpenWebSearchResults.svelte CHANGED
@@ -31,7 +31,7 @@
31
  </script>
32
 
33
  <details
34
- class="details flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames}"
35
  on:toggle={() => {
36
  if (webSearchMessages.length === 0 && webSearchId) {
37
  fetch(`${base}/search/${webSearchId}`)
@@ -62,48 +62,49 @@
62
  </div>
63
  </summary>
64
 
65
- <div class="content p-5 pb-1">
66
  {#if webSearchMessages.length === 0}
67
  <div class="mx-auto w-fit">
68
- <EosIconsLoading class="mb-3 h-10 w-10" />
69
  </div>
70
  {:else}
71
- <ol class="relative border-l border-gray-200 dark:border-gray-600">
72
  {#each webSearchMessages as message}
73
  {#if message.type === "update"}
74
- <li class="mb-4 ml-4">
75
- <div
76
- class="h-3 w-3 -translate-x-[1.4rem] rounded-full bg-gray-200 dark:bg-gray-600"
77
- />
78
- <h3 class="text-md -translate-y-[1.1rem] text-gray-800 dark:text-gray-100">
79
- {message.message}
80
- </h3>
 
 
 
 
81
  {#if message.args}
82
- <p
83
- class="mb-4 -translate-y-[1.1rem] font-normal text-gray-500 dark:text-gray-400 "
84
- >
85
  {message.args}
86
  </p>
87
  {/if}
88
  </li>
89
  {:else if message.type === "error"}
90
- <li class="mb-4 ml-4">
91
- <div
92
- class="h-3 w-3 -translate-x-[1.4rem] rounded-full text-red-700 dark:text-red-500"
93
- >
94
- <CarbonError class="h-3 w-3" />
 
 
 
95
  </div>
96
- <h3 class="text-md -translate-y-[1.1rem] text-red-700 dark:text-red-500">
97
- {message.message}
98
- </h3>
99
  {#if message.args}
100
- <p class="mb-4 -translate-y-[1.1rem] font-normal text-gray-500 dark:text-gray-400 ">
101
  {message.args}
102
  </p>
103
  {/if}
104
  </li>
105
  {/if}
106
- <p />
107
  {/each}
108
  </ol>
109
  {/if}
 
31
  </script>
32
 
33
  <details
34
+ class="details flex w-fit rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 {classNames} max-w-full"
35
  on:toggle={() => {
36
  if (webSearchMessages.length === 0 && webSearchId) {
37
  fetch(`${base}/search/${webSearchId}`)
 
62
  </div>
63
  </summary>
64
 
65
+ <div class="content px-5 pb-5 pt-4">
66
  {#if webSearchMessages.length === 0}
67
  <div class="mx-auto w-fit">
68
+ <EosIconsLoading class="mb-3 h-4 w-4" />
69
  </div>
70
  {:else}
71
+ <ol>
72
  {#each webSearchMessages as message}
73
  {#if message.type === "update"}
74
+ <li class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800">
75
+ <div class="flex items-start">
76
+ <div
77
+ class="-ml-1.5 h-3 w-3 flex-none rounded-full bg-gray-200 dark:bg-gray-600 {loading
78
+ ? 'group-last:animate-pulse group-last:bg-gray-300 group-last:dark:bg-gray-500'
79
+ : ''}"
80
+ />
81
+ <h3 class="text-md -mt-1.5 pl-2.5 text-gray-800 dark:text-gray-100">
82
+ {message.message}
83
+ </h3>
84
+ </div>
85
  {#if message.args}
86
+ <p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
 
 
87
  {message.args}
88
  </p>
89
  {/if}
90
  </li>
91
  {:else if message.type === "error"}
92
+ <li class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800">
93
+ <div class="flex items-start">
94
+ <CarbonError
95
+ class="-ml-1.5 h-3 w-3 flex-none scale-110 text-red-700 dark:text-red-500"
96
+ />
97
+ <h3 class="text-md -mt-1.5 pl-2.5 text-red-700 dark:text-red-500">
98
+ {message.message}
99
+ </h3>
100
  </div>
 
 
 
101
  {#if message.args}
102
+ <p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
103
  {message.args}
104
  </p>
105
  {/if}
106
  </li>
107
  {/if}
 
108
  {/each}
109
  </ol>
110
  {/if}
src/lib/components/chat/ChatMessage.svelte CHANGED
@@ -121,7 +121,7 @@
121
  {#if message.webSearchId || (webSearchMessages.length > 0 && isLast)}
122
  {#key (message.webSearchId, message.score, loading)}
123
  <OpenWebSearchResults
124
- classNames={tokens.length ? "mb-3" : ""}
125
  webSearchId={message.webSearchId}
126
  {webSearchMessages}
127
  loading={!webSearchIsDone}
 
121
  {#if message.webSearchId || (webSearchMessages.length > 0 && isLast)}
122
  {#key (message.webSearchId, message.score, loading)}
123
  <OpenWebSearchResults
124
+ classNames={tokens.length ? "mb-3.5" : ""}
125
  webSearchId={message.webSearchId}
126
  {webSearchMessages}
127
  loading={!webSearchIsDone}