From 6ee70acdc5dbcc34cc7a09472881a274ef41f0d9 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 22 Aug 2024 20:21:40 -0400
Subject: [PATCH] style: Add Radix Tabs, more styling changes

---
 client/src/components/Artifacts/Artifacts.tsx | 219 +++++++++---------
 1 file changed, 105 insertions(+), 114 deletions(-)

diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 79cc6d9001..d5778ce571 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -77,132 +77,123 @@ export default function Artifacts() {
   }
 
   return (
-    <div className="flex h-full w-full items-center justify-center py-2">
-      <div className="bg-bg-000 flex h-[97%] w-[97%] flex-col overflow-hidden rounded-xl border border-border-medium text-xl text-text-primary shadow-xl">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
-          <div className="flex items-center">
-            <button className="mr-2 text-text-secondary" onClick={() => cycleArtifact('prev')}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 256 256"
-              >
-                <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
-              </svg>
-            </button>
-            <h3 className="font-tiempos truncate text-sm text-text-primary">
-              {currentArtifact.title}
-            </h3>
-          </div>
-          <div className="flex items-center">
-            <div
-              role="group"
-              dir="ltr"
-              className="mr-2 inline-flex rounded-full border border-border-medium bg-surface-tertiary py-1"
-            >
-              <button
-                type="button"
-                onClick={() => setActiveTab('preview')}
-                className={`border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state="on"]:border-border-light data-[state="on"]:bg-surface-primary-alt data-[state="on"]:text-text-primary ${
-                  activeTab === 'preview' ? 'data-[state="on"]' : ''
-                }`}
-              >
-                Preview
+    <Tabs.Root value={activeTab} onValueChange={setActiveTab} asChild>
+      <div className="flex h-full w-full items-center justify-center py-2">
+        <div className="flex h-[97%] w-[97%] flex-col overflow-hidden rounded-xl border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
+            <div className="flex items-center">
+              <button className="mr-2 text-text-secondary" onClick={() => cycleArtifact('prev')}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
+                </svg>
               </button>
-              <button
-                type="button"
-                onClick={() => setActiveTab('code')}
-                className={`border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state="on"]:border-border-light data-[state="on"]:bg-surface-primary-alt data-[state="on"]:text-text-primary ${
-                  activeTab === 'code' ? 'data-[state="on"]' : ''
-                }`}
-              >
-                Code
+              <h3 className="truncate text-sm text-text-primary">{currentArtifact.title}</h3>
+            </div>
+            <div className="flex items-center">
+              <Tabs.List className="mr-2 inline-flex h-7 rounded-full border border-border-medium bg-surface-tertiary">
+                <Tabs.Trigger
+                  value="preview"
+                  className="border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state=active]:border-border-light data-[state=active]:bg-surface-primary-alt data-[state=active]:text-text-primary"
+                >
+                  Preview
+                </Tabs.Trigger>
+                <Tabs.Trigger
+                  value="code"
+                  className="border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state=active]:border-border-light data-[state=active]:bg-surface-primary-alt data-[state=active]:text-text-primary"
+                >
+                  Code
+                </Tabs.Trigger>
+              </Tabs.List>
+              <button className="text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" />
+                </svg>
               </button>
             </div>
-            <button className="text-text-secondary">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 256 256"
-              >
-                <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" />
-              </svg>
-            </button>
           </div>
-        </div>
 
-        {/* Content */}
-        <div className="flex-grow overflow-auto bg-surface-secondary">
-          {activeTab === 'code' ? (
+          {/* Content */}
+          <Tabs.Content value="code" className="flex-grow overflow-auto bg-surface-secondary">
             <pre className="h-full w-full overflow-auto rounded bg-surface-primary-alt p-2 text-sm">
               <code>{currentArtifact.content}</code>
             </pre>
-          ) : (
+          </Tabs.Content>
+          <Tabs.Content value="preview" className="flex-grow overflow-auto bg-surface-secondary">
             <CodeViewer content={currentArtifact.content} />
-          )}
-        </div>
+          </Tabs.Content>
 
-        {/* Footer */}
-        <div className="flex items-center justify-between border-t border-border-medium bg-surface-primary-alt p-2 text-sm text-text-secondary">
-          <div className="flex items-center">
-            <button onClick={() => cycleArtifact('prev')} className="mr-2 text-text-secondary">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 256 256"
-              >
-                <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" />
-              </svg>
-            </button>
-            <span className="text-xs">Last edited 7 hours ago</span>
-            <button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 256 256"
-              >
-                <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" />
-              </svg>
-            </button>
-          </div>
-          <div className="flex items-center">
-            <button className="mr-2 text-text-secondary">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 256 256"
-              >
-                <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z" />
-              </svg>
-            </button>
-            <button className="mr-2 text-text-secondary">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 256 256"
-              >
-                <path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z" />
-              </svg>
-            </button>
-            <button className="border-0.5 font-styrene text-text-primary/90 hover:text-text-000 min-w-[4rem] whitespace-nowrap rounded-md border-border-medium bg-[radial-gradient(ellipse,_var(--tw-gradient-stops))] from-surface-active from-50% to-surface-active px-3 py-1 text-xs font-medium transition-colors hover:bg-surface-active active:scale-[0.985] active:bg-surface-active">
-              Publish
-            </button>
+          {/* Footer */}
+          <div className="flex items-center justify-between border-t border-border-medium bg-surface-primary-alt p-2 text-sm text-text-secondary">
+            <div className="flex items-center">
+              <button onClick={() => cycleArtifact('prev')} className="mr-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" />
+                </svg>
+              </button>
+              <span className="text-xs">{`${currentArtifactIndex + 1} / ${
+                artifactIds.length
+              }`}</span>
+              <button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" />
+                </svg>
+              </button>
+            </div>
+            <div className="flex items-center">
+              <button className="mr-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm72,184H56V48H82.75A47.93,47.93,0,0,0,80,64v8a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V64a47.93,47.93,0,0,0-2.75-16H200Z" />
+                </svg>
+              </button>
+              <button className="mr-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z" />
+                </svg>
+              </button>
+              <button className="border-0.5 min-w-[4rem] whitespace-nowrap rounded-md border-border-medium bg-[radial-gradient(ellipse,_var(--tw-gradient-stops))] from-surface-active from-50% to-surface-active px-3 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-surface-active hover:text-text-primary active:scale-[0.985] active:bg-surface-active">
+                Publish
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </Tabs.Root>
   );
 }