fix: Linting

.eslintrc.json

@@ -1,3 +1,21 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { 
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_|^UNUSED_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-empty-object-type": "off"
+  }
+}

package.json

@@ -61,18 +61,23 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
+    "@types/eslint__js": "^8.42.3",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.7",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "tsx": "^4.19.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "typescript-eslint": "^8.8.1"
   }
 }

src/agent/nodes/rewriteArtifact.ts

@@ -1,7 +1,6 @@
 import { ChatOpenAI } from "@langchain/openai";
 import { GraphAnnotation, GraphReturnType } from "../state";
 import { UPDATE_ENTIRE_ARTIFACT_PROMPT } from "../prompts";
-import { Artifact } from "../../types";
 
 export const rewriteArtifact = async (
   state: typeof GraphAnnotation.State

src/agent/nodes/rewriteArtifactTheme.ts

@@ -7,7 +7,6 @@ import {
   CHANGE_ARTIFACT_READING_LEVEL_PROMPT,
   CHANGE_ARTIFACT_TO_PIRATE_PROMPT,
 } from "../prompts";
-import { Artifact } from "../../types";
 
 export const rewriteArtifactTheme = async (
   state: typeof GraphAnnotation.State

src/agent/nodes/rewriteCodeArtifactTheme.ts

@@ -6,7 +6,6 @@ import {
   FIX_BUGS_CODE_ARTIFACT_PROMPT,
   PORT_LANGUAGE_CODE_ARTIFACT_PROMPT,
 } from "../prompts";
-import { Artifact } from "../../types";
 
 export const rewriteCodeArtifactTheme = async (
   state: typeof GraphAnnotation.State

src/components/Primitives.tsx

@@ -14,7 +14,6 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
   ArrowDownIcon,
-  ExternalLink,
   SendHorizontalIcon,
   SquarePen,
   Code,
@@ -24,7 +23,6 @@ import { MarkdownText } from "@/components/ui/assistant-ui/markdown-text";
 import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
 import { useArtifactToolUI } from "./ArtifactToolUI";
 import { Thread } from "@langchain/langgraph-sdk";
-import { LangSmithSVG } from "./icons/langsmith";
 import { useLangSmithLinkToolUI } from "./LangSmithLinkToolUI";
 import { ProgrammingLanguageList } from "./ProgrammingLanguageList";
 import { ProgrammingLanguageOptions } from "@/types";

src/components/artifacts/CodeRenderer.tsx

@@ -1,5 +1,5 @@
 import { Artifact } from "@/types";
-import { MutableRefObject, useState } from "react";
+import { MutableRefObject } from "react";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { cpp } from "@codemirror/lang-cpp";

src/components/artifacts/actions_toolbar/code/PortToLanguage.tsx

@@ -1,5 +1,4 @@
 import { GraphInput } from "@/hooks/useGraph";
-import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
 import { ProgrammingLanguageOptions } from "@/types";
 import { useToast } from "@/hooks/use-toast";
 import { ProgrammingLanguageList } from "@/components/ProgrammingLanguageList";

src/components/artifacts/actions_toolbar/text/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import {
   Languages,
-  Plus,
   BookOpen,
   SlidersVertical,
   SmilePlus,

src/components/ui/assistant-ui/markdown-text.tsx

@@ -8,7 +8,7 @@ import {
 import remarkGfm from "remark-gfm";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
-import { FC, memo, useCallback, useState } from "react";
+import { FC, memo, useState } from "react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 
 import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
@@ -23,7 +23,7 @@ const MarkdownTextImpl = () => {
       remarkPlugins={[remarkGfm, remarkMath]}
       rehypePlugins={[rehypeKatex]}
       components={{
-        h1: ({ node, className, ...props }) => (
+        h1: ({ node: _node, className, ...props }) => (
           <h1
             className={cn(
               "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
@@ -32,7 +32,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        h2: ({ node, className, ...props }) => (
+        h2: ({ node: _node, className, ...props }) => (
           <h2
             className={cn(
               "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -41,7 +41,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        h3: ({ node, className, ...props }) => (
+        h3: ({ node: _node, className, ...props }) => (
           <h3
             className={cn(
               "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -50,7 +50,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        h4: ({ node, className, ...props }) => (
+        h4: ({ node: _node, className, ...props }) => (
           <h4
             className={cn(
               "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -59,7 +59,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        h5: ({ node, className, ...props }) => (
+        h5: ({ node: _node, className, ...props }) => (
           <h5
             className={cn(
               "my-4 text-lg font-semibold first:mt-0 last:mb-0",
@@ -68,13 +68,13 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        h6: ({ node, className, ...props }) => (
+        h6: ({ node: _node, className, ...props }) => (
           <h6
             className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
             {...props}
           />
         ),
-        p: ({ node, className, ...props }) => (
+        p: ({ node: _node, className, ...props }) => (
           <p
             className={cn(
               "mb-5 mt-5 leading-7 first:mt-0 last:mb-0",
@@ -83,7 +83,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        a: ({ node, className, ...props }) => (
+        a: ({ node: _node, className, ...props }) => (
           <a
             target="_blank"
             className={cn(
@@ -93,28 +93,28 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        blockquote: ({ node, className, ...props }) => (
+        blockquote: ({ node: _node, className, ...props }) => (
           <blockquote
             className={cn("border-l-2 pl-6 italic", className)}
             {...props}
           />
         ),
-        ul: ({ node, className, ...props }) => (
+        ul: ({ node: _node, className, ...props }) => (
           <ul
             className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)}
             {...props}
           />
         ),
-        ol: ({ node, className, ...props }) => (
+        ol: ({ node: _node, className, ...props }) => (
           <ol
             className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)}
             {...props}
           />
         ),
-        hr: ({ node, className, ...props }) => (
+        hr: ({ node: _node, className, ...props }) => (
           <hr className={cn("my-5 border-b", className)} {...props} />
         ),
-        table: ({ node, className, ...props }) => (
+        table: ({ node: _node, className, ...props }) => (
           <table
             className={cn(
               "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
@@ -123,7 +123,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        th: ({ node, className, ...props }) => (
+        th: ({ node: _node, className, ...props }) => (
           <th
             className={cn(
               "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -132,7 +132,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        td: ({ node, className, ...props }) => (
+        td: ({ node: _node, className, ...props }) => (
           <td
             className={cn(
               "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -141,7 +141,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        tr: ({ node, className, ...props }) => (
+        tr: ({ node: _node, className, ...props }) => (
           <tr
             className={cn(
               "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
@@ -150,13 +150,13 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        sup: ({ node, className, ...props }) => (
+        sup: ({ node: _node, className, ...props }) => (
           <sup
             className={cn("[&>a]:text-xs [&>a]:no-underline", className)}
             {...props}
           />
         ),
-        pre: ({ node, className, ...props }) => (
+        pre: ({ node: _node, className, ...props }) => (
           <pre
             className={cn(
               "overflow-x-auto rounded-b-lg bg-black p-4 text-white",
@@ -165,7 +165,7 @@ const MarkdownTextImpl = () => {
             {...props}
           />
         ),
-        code: function Code({ node, className, ...props }) {
+        code: function Code({ node: _node, className, ...props }) {
           const isCodeBlock = useIsMarkdownCodeBlock();
           return (
             <code

src/hooks/use-toast.ts

@@ -15,7 +15,7 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement;
 };
 
-const actionTypes = {
+const UNUSED_actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
@@ -29,7 +29,7 @@ function genId() {
   return count.toString();
 }
 
-type ActionType = typeof actionTypes;
+type ActionType = typeof UNUSED_actionTypes;
 
 type Action =
   | {

src/hooks/useGraph.tsx

@@ -178,7 +178,7 @@ export function useGraph() {
                 setSelectedArtifactId(artifactId);
               }
             }
-          } catch (e) {
+          } catch (_) {
             // no-op
           }
         } else if (chunk.data.metadata.langgraph_node === "updateArtifact") {
@@ -242,7 +242,7 @@ export function useGraph() {
             newArtifactText += chunk.data.data.chunk[1].content;
 
             // Ensure we have the language to update the artifact with
-            let artifactLanguage = params.portLanguage || undefined;
+            const artifactLanguage = params.portLanguage || undefined;
 
             // If no highlight, update the entire content as before
             setArtifacts((prev) => {
@@ -356,7 +356,7 @@ export function useGraph() {
                   ?.split("https://smith.langchain.com/public/")[1]
                   .split("/")[0],
               };
-              let castMsg = msg as AIMessage;
+              const castMsg = msg as AIMessage;
               const newMessageWithToolCall = new AIMessage({
                 ...castMsg,
                 content: castMsg.content,

src/hooks/useRuns.tsx

@@ -1,5 +1,3 @@
-import { useToast } from "./use-toast";
-
 export function useRuns() {
   /**
    * Generates a public shared run ID for the given run ID.