feat: add perplexity model

packages/backend/src/utils/playground.ts

@@ -109,6 +109,7 @@ export async function handleStream(
 
       res = {
         choices,
+        citations: part.citations, // perplexity models return an array of citations links
         usage: {
           completion_tokens: tokens,
         },
@@ -421,7 +422,7 @@ export async function runAImodel(
   let res = await openai.chat.completions.create({
     model,
     messages,
-    stream: stream,
+    stream,
     temperature: extra?.temperature,
     max_tokens: extra?.max_tokens,
     top_p: extra?.top_p,

packages/frontend/components/SmartViewer/Message.tsx

@@ -224,18 +224,37 @@ function TextMessage({
 }) {
   const text = data.content || data.text;
 
-  return (
-    <Code className={classes.textMessage}>
-      <ProtectedText>
-        {editable ? (
+  if (editable) {
+    return (
+      <Code className={classes.textMessage}>
+        <ProtectedText>
           <Textarea
             value={data.content || data.text}
             placeholder="Content"
             data-testid="prompt-chat-editor"
             onChange={(e) => onChange({ ...data, content: e.target.value })}
             {...ghostTextAreaStyles}
           />
-        ) : (
+        </ProtectedText>
+      </Code>
+    );
+  } else if (data.citations) {
+    const textWithLinks = text.replace(/\[(\d+)\]/g, (match, numberStr) => {
+      const idx = parseInt(numberStr, 10) - 1;
+      if (data.citations[idx]) {
+        return `<a href="${data.citations[idx]}" target="_blank" class="${classes.citationLink}">[${numberStr}]</a>`;
+      }
+      return match;
+    });
+    return (
+      <Code className={classes.textMessage}>
+        <Text size="sm" dangerouslySetInnerHTML={{ __html: textWithLinks }} />
+      </Code>
+    );
+  } else {
+    return (
+      <Code className={classes.textMessage}>
+        <ProtectedText>
           <HighlightPii
             text={
               compact
@@ -244,10 +263,10 @@ function TextMessage({
             }
             piiDetection={piiDetection}
           />
-        )}
-      </ProtectedText>
-    </Code>
-  );
+        </ProtectedText>
+      </Code>
+    );
+  }
 }
 
 function ResponsiveImage({ src }) {

packages/frontend/components/SmartViewer/index.module.css

@@ -156,3 +156,8 @@
   border-radius: var(--mantine-radius-sm);
   width: 100%;
 }
+
+
+.citationLink {
+  text-decoration: none;;
+}

packages/frontend/components/checks/ChecksModal.tsx

@@ -182,7 +182,7 @@ export default function ChecksModal({
           <Anchor
             href="#"
             onClick={() => {
-              $crisp.push(["do", "chat:open"]);
+              $crisp?.push(["do", "chat:open"]);
             }}
             variant="transparent"
           >

packages/frontend/components/layout/Empty.tsx

@@ -343,7 +343,7 @@ const IntegrationStepper = ({ integration }: { integration: string }) => {
                 </Text>
                 <Button
                   onClick={() => {
-                    $crisp.push(["do", "chat:open"]);
+                    $crisp?.push(["do", "chat:open"]);
                   }}
                   size="compact-xs"
                   variant="outline"
@@ -696,7 +696,7 @@ export default function Empty({
                     color="blue"
                     variant="light"
                     onClick={() => {
-                      $crisp.push(["do", "chat:open"]);
+                      $crisp?.push(["do", "chat:open"]);
                     }}
                   >
                     Chat with us

packages/frontend/components/layout/Sidebar.tsx

@@ -581,7 +581,7 @@ export default function Sidebar() {
                     <Menu.Item
                       leftSection={<IconMessage2 size={14} />}
                       onClick={() => {
-                        $crisp.push(["do", "chat:open"]);
+                        $crisp?.push(["do", "chat:open"]);
                       }}
                     >
                       Feedback

packages/frontend/pages/join.tsx

@@ -47,7 +47,7 @@ function TeamFull({ orgName }) {
               component="button"
               type="button"
               onClick={() => {
-                $crisp.push(["do", "chat:open"]);
+                $crisp?.push(["do", "chat:open"]);
               }}
             >
               Contact support →

packages/frontend/pages/prompts/[[...id]].tsx

@@ -199,7 +199,6 @@ function Playground() {
           setTemplate({ mode: "openai" });
 
           setOutput(run.output);
-
           setOutputTokens(run.tokens?.completion);
         }
 
@@ -358,6 +357,8 @@ function Playground() {
     setOutputTokens(0);
     setStreaming(true);
 
+    let citations = null;
+
     try {
       await fetcher.getStream(
         `/orgs/${org?.id}/playground`,
@@ -369,8 +370,11 @@ function Playground() {
         (chunk) => {
           try {
             const parsedLine = JSON.parse(chunk);
+            if (parsedLine.citations && !citations) {
+              citations = parsedLine.citations;
+            }
 
-            setOutput(parsedLine.choices[0]?.message);
+            setOutput({ ...parsedLine.choices[0]?.message, citations });
             setOutputTokens(parsedLine.usage?.completion_tokens || 0);
             setError(null);
           } catch (error) {
@@ -379,6 +383,8 @@ function Playground() {
         },
       );
 
+      // setOutput({ ...output, citations });
+
       // scroll template-input-area to the end
       const element = document.getElementById("template-input-area");
       element.scrollTop = element.scrollHeight;

packages/frontend/utils/analytics.ts

@@ -169,7 +169,9 @@ function track(event: string, data?: any) {
   try {
     posthog?.capture(event, data);
 
-    w?.crisp?.push(["set", "session:event", [[[event, data]]]]);
+    if (typeof w?.crisp?.push === "function") {
+      w?.crisp?.push(["set", "session:event", [[[event, data]]]]);
+    }
   } catch (e) {
     console.error(e);
   }

packages/shared/models.ts

@@ -198,4 +198,9 @@ export const MODELS = [
     name: "grok-2-1212",
     provider: "openrouter",
   },
+  {
+    id: "perplexity/llama-3.1-sonar-large-128k-online",
+    name: "perplexity-llama-3.1-sonar-large-128k-online",
+    provider: "openrouter",
+  },
 ];