refactor: updating UI text to docwrangler (#257)

* rebrand to docwrangler * refactor: rebranding to docwrangler * refactor: rebranding to docwrangler * refactor: edit vercel.json
ucbepic · Jan 2, 2025 · df4c809 · df4c809
1 parent 662d6a2
commit df4c809
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 128 deletions.
diff --git a/server/app/routes/convert.py b/server/app/routes/convert.py
@@ -26,6 +26,7 @@
 router = APIRouter()
 
 MODAL_ENDPOINT = "https://ucbepic--docling-converter-convert-documents.modal.run"
+# MODAL_ENDPOINT = "https://ucbepic--docling-converter-convert-documents-dev.modal.run"
 
 def process_document_with_azure(file_path: str, endpoint: str, key: str) -> str:
     """Process a single document with Azure Document Intelligence"""

diff --git a/vercel.json b/vercel.json
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
@@ -60,9 +60,9 @@ export default function Home() {
 
   const newsItems = [
     {
-      highlight: "Launched our IDE!",
+      highlight: "Launched DocWrangler!",
       content:
-        "Making prompt engineering easier than ever with our new interactive playground.",
+        "Making prompt engineering easier than ever with DocWrangler, our new interactive playground.",
       link: "/playground",
       linkText: "Try it now",
       date: "Dec 2024",
@@ -101,7 +101,7 @@ export default function Home() {
               className="w-12 h-12 sm:w-16 sm:h-16 mr-2 text-primary"
               strokeWidth={1.5}
             />
-            <span className="logo-text text-2xl sm:text-3xl">docetl</span>
+            <span className="logo-text text-2xl sm:text-3xl">DocETL</span>
           </div>
           <p className="text-lg sm:text-xl mb-4 sm:mb-6">
             A system for LLM-powered data processing
@@ -142,7 +142,7 @@ export default function Home() {
                         ))}
                       </div>
                       <div className="ticker-item">
-                        <em>Launched our IDE!</em> Making prompt engineering
+                        <em>Launched DocWrangler!</em> Making prompt engineering
                         easier than ever with our new interactive playground{" "}
                         <a
                           href="/playground"
@@ -458,10 +458,10 @@ export default function Home() {
                     <p className="text-sm text-muted-foreground">
                       Prompts are the primary interface between humans and
                       LLM-powered data systems, but crafting them is more art
-                      than science. Our IDE explores new ways to make prompt
-                      engineering systematic and intuitive, with interactive
-                      tools that help users express their intent clearly and
-                      debug unexpected behaviors.{" "}
+                      than science. DocWrangler, our IDE, explores new ways to
+                      make prompt engineering systematic and intuitive, with
+                      interactive tools that help users express their intent
+                      clearly and debug unexpected behaviors.{" "}
                       <a
                         href="/playground"
                         className="text-blue-500 hover:underline inline-flex items-center"

diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx
@@ -194,8 +194,8 @@ const MobileWarning: React.FC = () => (
         Desktop Required
       </h2>
       <p className="text-muted-foreground mb-6 leading-relaxed">
-        DocETL requires a larger screen for the best experience. Please switch
-        to a desktop or laptop computer to access all features.
+        DocWrangler requires a larger screen for the best experience. Please
+        switch to a desktop or laptop computer to access all features.
       </p>
       <div className="text-sm text-muted-foreground/80 bg-muted px-4 py-2 rounded-[var(--radius)] mb-6">
         Recommended minimum screen width: 768px
@@ -221,7 +221,7 @@ const LoadingScreen: React.FC = () => (
       <div className="flex items-center gap-2">
         <Scroll className="h-6 w-6 text-primary" />
         <h2 className="text-2xl font-bold text-primary tracking-tight">
-          DocETL
+          DocWrangler
         </h2>
       </div>
       <div className="text-muted-foreground text-lg">
@@ -518,6 +518,16 @@ const CodeEditorPipelineApp: React.FC = () => {
                   >
                     Show Documentation
                   </MenubarItem>
+                  <MenubarItem
+                    onSelect={() =>
+                      window.open(
+                        "https://discord.com/invite/fHp7B2X3xx",
+                        "_blank"
+                      )
+                    }
+                  >
+                    Ask a Question on Discord
+                  </MenubarItem>
                   <MenubarSub>
                     <MenubarSubTrigger>Tutorials</MenubarSubTrigger>
                     <MenubarSubContent>
@@ -580,38 +590,63 @@ const CodeEditorPipelineApp: React.FC = () => {
                   Info
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-80">
-                <h3 className="font-semibold mb-2">About DocETL</h3>
-                <div className="space-y-4 text-sm text-gray-600">
-                  <p>
-                    DocETL is a research project by the EPIC Data Lab at UC
-                    Berkeley. Learn more at{" "}
+              <PopoverContent className="w-[32rem]">
+                <h3 className="text-lg font-semibold mb-4 text-foreground">
+                  About DocWrangler and DocETL
+                </h3>
+                <div className="space-y-4 text-sm">
+                  <p className="text-foreground/90 leading-relaxed">
+                    DocWrangler and DocETL are research projects from UC
+                    Berkeley's EPIC Data Lab. DocWrangler provides an
+                    interactive playground for building data processing
+                    pipelines, powered by DocETL - our system that combines a
+                    domain-specific language, query optimizer, and execution
+                    engine. Learn more at{" "}
                     <a
                       href="https://docetl.org"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-blue-500 hover:underline"
+                      className="text-primary hover:underline font-medium"
                     >
                       docetl.org
                     </a>
                     .
                   </p>
-                  <p>
-                    The AI Chat and Improve Prompt features use our system and
-                    log usage data by default. For privacy, you can use your own
-                    OpenAI key: Go to Edit &gt; Edit API keys and enable
-                    &quot;use personal openai key&quot; in these features.
+                  <p className="text-foreground/90 leading-relaxed">
+                    DocWrangler's AI Chat and Improve Prompt features use our
+                    experimental LLM and log usage data. For privacy, you can
+                    use your own API key instead by going to Edit &gt; Edit API
+                    keys and enabling &quot;Use personal API key&quot; in the
+                    features.
                   </p>
-                  <p>
+                  <p className="text-foreground/90 leading-relaxed">
                     Want to run DocETL or the playground locally? Check out our{" "}
                     <a
                       href="https://ucbepic.github.io/docetl/playground/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-blue-500 hover:underline"
+                      className="text-primary hover:underline font-medium"
                     >
                       self-hosted version
                     </a>
+                    . For DocETL documentation, visit{" "}
+                    <a
+                      href="https://ucbepic.github.io/docetl"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline font-medium"
+                    >
+                      our docs
+                    </a>
+                    . Have questions? Join our{" "}
+                    <a
+                      href="https://discord.com/invite/fHp7B2X3xx"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline font-medium"
+                    >
+                      Discord community
+                    </a>
                     .
                   </p>
                 </div>
@@ -620,7 +655,7 @@ const CodeEditorPipelineApp: React.FC = () => {
           </div>
           <div className="flex items-center gap-2">
             <Scroll className="text-primary" size={20} />
-            <h1 className="text-lg font-bold text-primary">DocETL</h1>
+            <h1 className="text-lg font-bold text-primary">DocWrangler</h1>
             {isMounted && (
               <span className="text-sm text-gray-600">({namespace})</span>
             )}

diff --git a/website/src/components/AIChatPanel.tsx b/website/src/components/AIChatPanel.tsx
@@ -184,12 +184,12 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({ onClose }) => {
       {
         id: String(Date.now()),
         role: "system",
-        content: `You are the DocETL assistant, helping users build and refine data analysis pipelines. You are an expert at data analysis.
+        content: `You are the DocWrangler assistant, helping users build and refine data analysis pipelines. You are an expert at data analysis.
 
 Core Capabilities:
-- DocETL enables users to create sophisticated data processing workflows with LLM calls, like crowdsourcing pipelines
+- DocWrangler is an interface that enables users to create sophisticated data processing workflows with LLM calls, like crowdsourcing pipelines. It uses the DocETL DSL and query engine.
 - Each pipeline processes documents through a sequence of operations
-- Operations can be LLM-based (map, reduce, resolve, filter) or utility-based (unnest, split, gather, sample) or code-based (python for map, reduce, and filter)
+- DocETL Operations can be LLM-based (map, reduce, resolve, filter) or utility-based (unnest, split, gather, sample) or code-based (python for map, reduce, and filter)
 
 Operation Details:
 - Every LLM operation has:

diff --git a/website/src/components/OperationCard.tsx b/website/src/components/OperationCard.tsx
@@ -220,43 +220,45 @@ const OperationHeader: React.FC<OperationHeaderProps> = React.memo(
             )}
           </div>
 
-          {isEditing ? (
-            <Input
-              value={editedName}
-              onChange={(e) => setEditedName(e.target.value)}
-              onBlur={() => {
-                setIsEditing(false);
-                onEdit(editedName);
-              }}
-              onKeyPress={(e) => {
-                if (e.key === "Enter") {
+          <div className="flex items-center">
+            {isEditing ? (
+              <Input
+                value={editedName}
+                onChange={(e) => setEditedName(e.target.value)}
+                onBlur={() => {
                   setIsEditing(false);
                   onEdit(editedName);
-                }
-              }}
-              className="max-w-[200px] h-6 text-sm font-medium"
-              autoFocus
-            />
-          ) : (
-            <div
-              className="flex items-center gap-1.5 group cursor-pointer"
-              onClick={() => setIsEditing(true)}
-            >
-              <span
-                className={`text-sm font-medium select-none ${
-                  llmType === "LLM"
-                    ? "bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text"
-                    : ""
-                }`}
-              >
-                {name}
-              </span>
-              <Pencil
-                size={13}
-                className="opacity-0 group-hover:opacity-70 transition-opacity text-muted-foreground"
+                }}
+                onKeyPress={(e) => {
+                  if (e.key === "Enter") {
+                    setIsEditing(false);
+                    onEdit(editedName);
+                  }
+                }}
+                className="max-w-[200px] h-6 text-sm font-medium"
+                autoFocus
               />
-            </div>
-          )}
+            ) : (
+              <div
+                className="flex items-center gap-1 group cursor-pointer"
+                onClick={() => setIsEditing(true)}
+              >
+                <span
+                  className={`text-sm font-medium select-none ${
+                    llmType === "LLM"
+                      ? "bg-gradient-to-r from-blue-600 to-purple-600 text-transparent bg-clip-text font-semibold"
+                      : ""
+                  }`}
+                >
+                  {name}
+                </span>
+                <Pencil
+                  size={13}
+                  className="opacity-0 group-hover:opacity-70 transition-opacity text-muted-foreground"
+                />
+              </div>
+            )}
+          </div>
         </div>
 
         {/* Action Bar - Keep only the most essential actions */}