[OPIK-536]: merge problems fixes;

apps/opik-frontend/src/components/pages/PlaygroundPage/PlaygroundPrompt/PlaygroundPrompt.tsx

@@ -18,9 +18,9 @@ import {
 import last from "lodash/last";
 import PlaygroundPromptMessages from "@/components/pages/PlaygroundPage/PlaygroundPrompt/PlaygroundPromptMessages/PlaygroundPromptMessages";
 import PromptModelSelect from "@/components/pages/PlaygroundPage/PlaygroundPrompt/PromptModelSelect";
-import PromptModelSettings from "@/components/pages/PlaygroundPage/PlaygroundPrompt/PromptModelSettings/PromptModelSettings";
 import { getAlphabetLetter } from "@/lib/utils";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
+import PromptModelSettings from "@/components/pages/PlaygroundPage/PlaygroundPrompt/PromptModelSettings/PromptModelSettings";
 
 interface PlaygroundPromptProps extends PlaygroundPromptType {
   index: number;

apps/opik-frontend/src/components/pages/PlaygroundPage/PlaygroundPrompt/PromptModelSettings/providerSettings/PromptModelSettingsTooltip.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface PromptModelSettingsTooltipContentProps {
+  text: string;
+}
+
+const PromptModelSettingsTooltipContent = ({
+  text,
+}: PromptModelSettingsTooltipContentProps) => {
+  return <p className="max-w-72 p-1">{text}</p>;
+};
+
+export default PromptModelSettingsTooltipContent;

apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx

@@ -8,8 +8,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-type TooltipWrapperProps = {
-  content: string;
+export type TooltipWrapperProps = {
+  content: string | React.ReactElement;
   children?: React.ReactNode;
   side?: "top" | "right" | "bottom" | "left";
   hotkey?: React.ReactNode;

apps/opik-frontend/src/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-[#F1F5F9]">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block size-4 rounded-full border-2 border-white bg-primary ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

apps/opik-frontend/src/lib/utils.ts

@@ -83,11 +83,11 @@ export const getAlphabetLetter = (i: number) => {
   return characters.charAt(i % characters.length);
 };
 
+export const snakeCaseObj = <T extends object>(obj: T) => {
+  return mapKeys(obj, (_, key) => snakeCase(key));
+};
+
 export const calculateWorkspaceName = (
   workspaceName: string,
   defaultName = "Personal",
 ) => (workspaceName === DEFAULT_WORKSPACE_NAME ? defaultName : workspaceName);
-
-export const snakeCaseObj = <T extends object>(obj: T) => {
-  return mapKeys(obj, (_, key) => snakeCase(key));
-};

apps/opik-frontend/src/main.scss

@@ -233,4 +233,13 @@
       display: none;
     }
   }
+
+  .comet-no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .comet-no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 }

apps/opik-frontend/src/router.tsx

@@ -298,6 +298,7 @@ const routeTree = rootRoute.addChildren([
         redirectProjectsRoute,
         redirectDatasetsRoute,
       ]),
+      playgroundRoute,
     ]),
   ]),
 ]);

apps/opik-frontend/src/types/playgroundPrompts.ts

@@ -66,9 +66,3 @@ export interface ProviderStreamingMessageType {
   choices: ProviderStreamingMessageChoiceType[];
   usage: UsageType;
 }
-
-export interface PlaygroundOutputType {
-  id: string;
-  promptId: string;
-  text: string;
-}