@fuma-content/studio 0.1.0

package/src/app/api/ai/command/utils.ts

@@ -0,0 +1,242 @@
+import type { ChatMessage } from "@/components/editor/use-chat";
+import type { UIMessage } from "ai";
+
+import { getMarkdown } from "@platejs/ai";
+import { serializeMd } from "@platejs/markdown";
+import dedent from "dedent";
+import { type SlateEditor, RangeApi } from "platejs";
+
+/**
+ * Tag content split by newlines
+ *
+ * @example
+ *   <tools>
+ *   {content}
+ *   </tools>
+ */
+export const tag = (tag: string, content?: string | null) => {
+  if (!content) return "";
+
+  return [`<${tag}>`, content, `</${tag}>`].join("\n");
+};
+
+/**
+ * Tag content inline
+ *
+ * @example
+ *   <tools>{content}</tools>
+ */
+export const inlineTag = (tag: string, content?: string | null) => {
+  if (!content) return "";
+
+  return [`<${tag}>`, content, `</${tag}>`].join("");
+};
+
+// Sections split by double newlines
+export const sections = (sections: (boolean | string | null | undefined)[]) =>
+  sections.filter(Boolean).join("\n\n");
+
+// List items split by newlines
+export const list = (items: string[] | undefined) =>
+  items
+    ? items
+        .filter(Boolean)
+        .map((item) => `- ${item}`)
+        .join("\n")
+    : "";
+
+export type StructuredPromptSections = {
+  backgroundData?: string;
+  examples?: string[] | string;
+  history?: string;
+  outputFormatting?: string;
+  prefilledResponse?: string;
+  question?: string;
+  rules?: string;
+  task?: string;
+  taskContext?: string;
+  thinking?: string;
+  tone?: string;
+  tools?: string;
+};
+
+/**
+ * Build a structured prompt following best practices for AI interactions.
+ *
+ * @example
+ *   https://imgur.com/carbon-Db5tDUh
+ *   1. Task context - You will be acting as an AI career coach named Joe created by the company
+ *   AdAstra Careers. Your goal is to give career advice to users. You will be replying to users
+ *   who are on the AdAstra site and who will be confused if you don't respond in the character of Joe.
+ *   2. Tone context - You should maintain a friendly customer service tone.
+ *   3. Background data - Here is the career guidance document you should reference when answering the user: <guide>{DOCUMENT}</guide>
+ *   3b. Tools - Available tool descriptions
+ *   4. Rules - Here are some important rules for the interaction:
+ *   - Always stay in character, as Joe, an AI from AdAstra careers
+ *   - If you are unsure how to respond, say "Sorry, I didn't understand that. Could you repeat the question?"
+ *   - If someone asks something irrelevant, say, "Sorry, I am Joe and I give career advice..."
+ *   5. Examples - Here is an example of how to respond in a standard interaction:
+ *   <example>
+ *   User: Hi, how were you created and what do you do?
+ *   Joe: Hello! My name is Joe, and I was created by AdAstra Careers to give career advice...
+ *   </example>
+ *   6. Conversation history - Here is the conversation history (between the user and you) prior to the question. <history>{HISTORY}</history>
+ *   6b. Question - Here is the user's question: <question>{QUESTION}</question>
+ *   7. Immediate task - How do you respond to the user's question?
+ *   8. Thinking - Think about your answer first before you respond.
+ *   9. Output formatting - Put your response in <response></response> tags.
+ *   11. Prefilled response - Optional response starter
+ */
+export const buildStructuredPrompt = ({
+  backgroundData,
+  examples,
+  history,
+  outputFormatting,
+  prefilledResponse,
+  question,
+  rules,
+  task,
+  taskContext,
+  thinking,
+  tone,
+}: StructuredPromptSections) => {
+  const formattedExamples = Array.isArray(examples)
+    ? examples.map((example) => tag("example", example)).join("\n")
+    : examples;
+
+  const context = sections([
+    taskContext,
+    tone,
+
+    backgroundData &&
+      dedent`
+        Here is the background data you should reference when answering the user:
+        <backgroundData>
+              ${backgroundData}
+        </backgroundData>
+      `,
+    rules &&
+      dedent`
+        Here are some important rules for the interaction:
+            ${rules}
+      `,
+
+    formattedExamples &&
+      dedent`
+        Here are some examples of how to respond in a standard interaction:
+              ${tag("examples", formattedExamples)}
+      `,
+
+    history &&
+      dedent`
+        Here is the conversation history (between the user and you) prior to the question:
+              ${tag("history", history)}
+      `,
+
+    question &&
+      dedent`
+        Here is the user's question:
+              ${tag("question", question)}
+      `,
+  ]);
+
+  return sections([
+    tag("context", context),
+    task,
+    // or <reasoningSteps>
+    thinking && tag("thinking", thinking),
+    // Not needed with structured output
+    outputFormatting && tag("outputFormatting", outputFormatting),
+    // Not needed with structured output
+    (prefilledResponse ?? null) !== null && tag("prefilledResponse", prefilledResponse ?? ""),
+  ]);
+};
+
+export function getTextFromMessage(message: UIMessage): string {
+  return message.parts
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join("");
+}
+
+/**
+ * Format conversation history for prompts. Extracts text from messages and
+ * formats as ROLE: text.
+ */
+export function formatTextFromMessages(
+  messages: ChatMessage[],
+  options?: { limit?: number },
+): string {
+  const historyMessages = options?.limit ? messages.slice(-options.limit) : messages;
+
+  return historyMessages
+    .map((message) => {
+      const text = getTextFromMessage(message).trim();
+      if (!text) return null;
+      const role = message.role.toUpperCase();
+      return `${role}: ${text}`;
+    })
+    .filter(Boolean)
+    .join("\n");
+}
+
+const SELECTION_START = "<Selection>";
+const SELECTION_END = "</Selection>";
+
+export const addSelection = (editor: SlateEditor) => {
+  if (!editor.selection) return;
+  if (editor.api.isExpanded()) {
+    const [start, end] = RangeApi.edges(editor.selection);
+
+    editor.tf.withoutNormalizing(() => {
+      editor.tf.insertText(SELECTION_END, {
+        at: end,
+      });
+
+      editor.tf.insertText(SELECTION_START, {
+        at: start,
+      });
+    });
+  }
+};
+
+const removeEscapeSelection = (editor: SlateEditor, text: string) => {
+  let newText = text
+    .replace(`\\${SELECTION_START}`, SELECTION_START)
+    .replace(`\\${SELECTION_END}`, SELECTION_END);
+
+  // If the selection is on a void element, inserting the placeholder will fail, and the string must be replaced manually.
+  if (!newText.includes(SELECTION_END)) {
+    const [_, end] = RangeApi.edges(editor.selection!);
+
+    const node = editor.api.block({ at: end.path });
+
+    if (!node) return newText;
+    if (editor.api.isVoid(node[0])) {
+      const voidString = serializeMd(editor, { value: [node[0]] });
+
+      const idx = newText.lastIndexOf(voidString);
+
+      if (idx !== -1) {
+        newText =
+          newText.slice(0, idx) +
+          voidString.trimEnd() +
+          SELECTION_END +
+          newText.slice(idx + voidString.length);
+      }
+    }
+  }
+
+  return newText;
+};
+
+/** Check if the current selection fully covers all top-level blocks. */
+export const isMultiBlocks = (editor: SlateEditor) => {
+  const blocks = editor.api.blocks({ mode: "highest" });
+
+  return blocks.length > 1;
+};
+
+/** Get markdown with selection markers */
+export const getMarkdownWithSelection = (editor: SlateEditor) =>
+  removeEscapeSelection(editor, getMarkdown(editor, { type: "block" }));

package/src/app/api/ai/copilot/route.ts

@@ -0,0 +1,33 @@
+import type { NextRequest } from "next/server";
+
+import { generateText } from "ai";
+import { NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  const { apiKey: key, model = "gpt-4o-mini", prompt, system } = await req.json();
+
+  const apiKey = key || process.env.AI_GATEWAY_API_KEY;
+
+  if (!apiKey) {
+    return NextResponse.json({ error: "Missing ai gateway API key." }, { status: 401 });
+  }
+
+  try {
+    const result = await generateText({
+      abortSignal: req.signal,
+      maxOutputTokens: 50,
+      model: `openai/${model}`,
+      prompt,
+      system,
+      temperature: 0.7,
+    });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      return NextResponse.json(null, { status: 408 });
+    }
+
+    return NextResponse.json({ error: "Failed to process AI request" }, { status: 500 });
+  }
+}

package/src/app/api/uploadthing/route.ts

@@ -0,0 +1,5 @@
+import { createRouteHandler } from "uploadthing/next";
+
+import { ourFileRouter } from "@/lib/uploadthing";
+
+export const { GET, POST } = createRouteHandler({ router: ourFileRouter });

package/src/app/codeblock/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Catppuccin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/app/codeblock/styles.css

@@ -0,0 +1,289 @@
+html:not(.dark) {
+  pre.hljs {
+    color: #4c4f69;
+    background: #eff1f5;
+  }
+  code .hljs-keyword {
+    color: #8839ef;
+  }
+  code .hljs-built_in {
+    color: #d20f39;
+  }
+  code .hljs-type {
+    color: #df8e1d;
+  }
+  code .hljs-literal {
+    color: #fe640b;
+  }
+  code .hljs-number {
+    color: #fe640b;
+  }
+  code .hljs-operator {
+    color: #04a5e5;
+  }
+  code .hljs-punctuation {
+    color: #5c5f77;
+  }
+  code .hljs-property {
+    color: #179299;
+  }
+  code .hljs-regexp {
+    color: #ea76cb;
+  }
+  code .hljs-string {
+    color: #40a02b;
+  }
+  code .hljs-char.escape_ {
+    color: #40a02b;
+  }
+  code .hljs-subst {
+    color: #6c6f85;
+  }
+  code .hljs-symbol {
+    color: #dd7878;
+  }
+  code .hljs-variable {
+    color: #8839ef;
+  }
+  code .hljs-variable.language_ {
+    color: #8839ef;
+  }
+  code .hljs-variable.constant_ {
+    color: #fe640b;
+  }
+  code .hljs-title {
+    color: #1e66f5;
+  }
+  code .hljs-title.class_ {
+    color: #df8e1d;
+  }
+  code .hljs-title.function_ {
+    color: #1e66f5;
+  }
+  code .hljs-params {
+    color: #4c4f69;
+  }
+  code .hljs-comment {
+    color: #7c7f93;
+  }
+  code .hljs-doctag {
+    color: #d20f39;
+  }
+  code .hljs-meta {
+    color: #fe640b;
+  }
+  code .hljs-section {
+    color: #1e66f5;
+  }
+  code .hljs-tag {
+    color: #179299;
+  }
+  code .hljs-name {
+    color: #8839ef;
+  }
+  code .hljs-attr {
+    color: #1e66f5;
+  }
+  code .hljs-attribute {
+    color: #40a02b;
+  }
+  code .hljs-bullet {
+    color: #179299;
+  }
+  code .hljs-code {
+    color: #40a02b;
+  }
+  code .hljs-emphasis {
+    color: #d20f39;
+    font-style: italic;
+  }
+  code .hljs-strong {
+    color: #d20f39;
+    font-weight: bold;
+  }
+  code .hljs-formula {
+    color: #179299;
+  }
+  code .hljs-link {
+    color: #209fb5;
+    font-style: italic;
+  }
+  code .hljs-quote {
+    color: #40a02b;
+    font-style: italic;
+  }
+  code .hljs-selector-tag {
+    color: #df8e1d;
+  }
+  code .hljs-selector-id {
+    color: #1e66f5;
+  }
+  code .hljs-selector-class {
+    color: #179299;
+  }
+  code .hljs-selector-attr {
+    color: #8839ef;
+  }
+  code .hljs-selector-pseudo {
+    color: #179299;
+  }
+  code .hljs-template-tag {
+    color: #dd7878;
+  }
+  code .hljs-template-variable {
+    color: #dd7878;
+  }
+  code .hljs-addition {
+    color: #40a02b;
+    background: rgba(64, 160, 43, 0.15);
+  }
+  code .hljs-deletion {
+    color: #d20f39;
+    background: rgba(210, 15, 57, 0.15);
+  }
+}
+
+.dark {
+  pre.hljs {
+    color: #cdd6f4;
+    background-color: #1e1e2e;
+  }
+  code .hljs-keyword {
+    color: #cba6f7;
+  }
+  code .hljs-built_in {
+    color: #f38ba8;
+  }
+  code .hljs-type {
+    color: #f9e2af;
+  }
+  code .hljs-literal {
+    color: #fab387;
+  }
+  code .hljs-number {
+    color: #fab387;
+  }
+  code .hljs-operator {
+    color: #89dceb;
+  }
+  code .hljs-punctuation {
+    color: #bac2de;
+  }
+  code .hljs-property {
+    color: #94e2d5;
+  }
+  code .hljs-regexp {
+    color: #f5c2e7;
+  }
+  code .hljs-string {
+    color: #a6e3a1;
+  }
+  code .hljs-char.escape_ {
+    color: #a6e3a1;
+  }
+  code .hljs-subst {
+    color: #a6adc8;
+  }
+  code .hljs-symbol {
+    color: #f2cdcd;
+  }
+  code .hljs-variable {
+    color: #cba6f7;
+  }
+  code .hljs-variable.language_ {
+    color: #cba6f7;
+  }
+  code .hljs-variable.constant_ {
+    color: #fab387;
+  }
+  code .hljs-title {
+    color: #89b4fa;
+  }
+  code .hljs-title.class_ {
+    color: #f9e2af;
+  }
+  code .hljs-title.function_ {
+    color: #89b4fa;
+  }
+  code .hljs-params {
+    color: #cdd6f4;
+  }
+  code .hljs-comment {
+    color: #9399b2;
+  }
+  code .hljs-doctag {
+    color: #f38ba8;
+  }
+  code .hljs-meta {
+    color: #fab387;
+  }
+  code .hljs-section {
+    color: #89b4fa;
+  }
+  code .hljs-tag {
+    color: #94e2d5;
+  }
+  code .hljs-name {
+    color: #cba6f7;
+  }
+  code .hljs-attr {
+    color: #89b4fa;
+  }
+  code .hljs-attribute {
+    color: #a6e3a1;
+  }
+  code .hljs-bullet {
+    color: #94e2d5;
+  }
+  code .hljs-code {
+    color: #a6e3a1;
+  }
+  code .hljs-emphasis {
+    color: #f38ba8;
+    font-style: italic;
+  }
+  code .hljs-strong {
+    color: #f38ba8;
+    font-weight: bold;
+  }
+  code .hljs-formula {
+    color: #94e2d5;
+  }
+  code .hljs-link {
+    color: #74c7ec;
+    font-style: italic;
+  }
+  code .hljs-quote {
+    color: #a6e3a1;
+    font-style: italic;
+  }
+  code .hljs-selector-tag {
+    color: #f9e2af;
+  }
+  code .hljs-selector-id {
+    color: #89b4fa;
+  }
+  code .hljs-selector-class {
+    color: #94e2d5;
+  }
+  code .hljs-selector-attr {
+    color: #cba6f7;
+  }
+  code .hljs-selector-pseudo {
+    color: #94e2d5;
+  }
+  code .hljs-template-tag {
+    color: #f2cdcd;
+  }
+  code .hljs-template-variable {
+    color: #f2cdcd;
+  }
+  code .hljs-addition {
+    color: #a6e3a1;
+    background: rgba(166, 227, 161, 0.15);
+  }
+  code .hljs-deletion {
+    color: #f38ba8;
+    background: rgba(243, 139, 168, 0.15);
+  }
+}