Merge remote-tracking branch 'origin/main' into system-prompt-variations-local

2024-12-16 20:52:01 +05:30
parent 19a3a03d45 2553814416
commit bb94180209
18 changed files with 251 additions and 409 deletions
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "1f513accc9fcb2c7e63c6608da93525c858abbf6" }
+{ "commit": "19a3a03d455a5042cd3f8c654b0498c4cde2ea75" }
--- a/app/components/chat/AssistantMessage.tsx
+++ b/app/components/chat/AssistantMessage.tsx
@@ -1,13 +1,30 @@
 import { memo } from 'react';
 import { Markdown } from './Markdown';
+import type { JSONValue } from 'ai';

 interface AssistantMessageProps {
  content: string;
+  annotations?: JSONValue[];
 }

-export const AssistantMessage = memo(({ content }: AssistantMessageProps) => {
+export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
+  const filteredAnnotations = (annotations?.filter(
+    (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
+  ) || []) as { type: string; value: any }[];
+
+  const usage: {
+    completionTokens: number;
+    promptTokens: number;
+    totalTokens: number;
+  } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
+
  return (
    <div className="overflow-hidden w-full">
+      {usage && (
+        <div className="text-sm text-bolt-elements-textSecondary mb-2">
+          Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+        </div>
+      )}
      <Markdown html>{content}</Markdown>
    </div>
  );
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -117,13 +117,22 @@ export const ChatImpl = memo(
        files,
        promptId,
      },
+      sendExtraMessageFields: true,
      onError: (error) => {
        logger.error('Request failed\n\n', error);
        toast.error(
          'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
        );
      },
-      onFinish: () => {
+      onFinish: (message, response) => {
+        const usage = response.usage;
+
+        if (usage) {
+          console.log('Token usage:', usage);
+
+          // You can now use the usage data as needed
+        }
+
        logger.debug('Finished streaming');
      },
      initialMessages,
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@@ -65,7 +65,11 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                  </div>
                )}
                <div className="grid grid-col-1 w-full">
-                  {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  {isUserMessage ? (
+                    <UserMessage content={content} />
+                  ) : (
+                    <AssistantMessage content={content} annotations={message.annotations} />
+                  )}
                </div>
                {!isUserMessage && (
                  <div className="flex gap-2 flex-col lg:flex-row">
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -12,42 +12,36 @@ interface UserMessageProps {
 export function UserMessage({ content }: UserMessageProps) {
  if (Array.isArray(content)) {
    const textItem = content.find((item) => item.type === 'text');
-    const textContent = sanitizeUserMessage(textItem?.text || '');
+    const textContent = stripMetadata(textItem?.text || '');
    const images = content.filter((item) => item.type === 'image' && item.image);

    return (
      <div className="overflow-hidden pt-[4px]">
-        <div className="flex items-start gap-4">
-          <div className="flex-1">
-            <Markdown limitedMarkdown>{textContent}</Markdown>
-          </div>
-          {images.length > 0 && (
-            <div className="flex-shrink-0 w-[160px]">
-              {images.map((item, index) => (
-                <div key={index} className="relative">
-                  <img
-                    src={item.image}
-                    alt={`Uploaded image ${index + 1}`}
-                    className="w-full h-[160px] rounded-lg object-cover border border-bolt-elements-borderColor"
-                  />
-                </div>
-              ))}
-            </div>
-          )}
+        <div className="flex flex-col gap-4">
+          {textContent && <Markdown html>{textContent}</Markdown>}
+          {images.map((item, index) => (
+            <img
+              key={index}
+              src={item.image}
+              alt={`Image ${index + 1}`}
+              className="max-w-full h-auto rounded-lg"
+              style={{ maxHeight: '512px', objectFit: 'contain' }}
+            />
+          ))}
        </div>
      </div>
    );
  }

-  const textContent = sanitizeUserMessage(content);
+  const textContent = stripMetadata(content);

  return (
    <div className="overflow-hidden pt-[4px]">
-      <Markdown limitedMarkdown>{textContent}</Markdown>
+      <Markdown html>{textContent}</Markdown>
    </div>
  );
 }

-function sanitizeUserMessage(content: string) {
+function stripMetadata(content: string) {
  return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 }
--- a/app/components/settings/debug/DebugTab.tsx
+++ b/app/components/settings/debug/DebugTab.tsx
@@ -34,10 +34,14 @@ interface IProviderConfig {

 interface CommitData {
  commit: string;
+  version?: string;
 }

+const connitJson: CommitData = commit;
+
 const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
-const versionHash = commit.commit;
+const versionHash = connitJson.commit;
+const versionTag = connitJson.version;
 const GITHUB_URLS = {
  original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
  fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
@@ -406,7 +410,7 @@ export default function DebugTab() {
              <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
                {versionHash.slice(0, 7)}
                <span className="ml-2 text-xs text-bolt-elements-textSecondary">
-                  ({new Date().toLocaleDateString()})
+                  (v{versionTag || '0.0.1'}) - {isLatestBranch ? 'nightly' : 'stable'}
                </span>
              </p>
            </div>
--- a/app/components/settings/providers/ProvidersTab.tsx
+++ b/app/components/settings/providers/ProvidersTab.tsx
@@ -6,7 +6,7 @@ import type { IProviderConfig } from '~/types/model';
 import { logStore } from '~/lib/stores/logs';

 // Import a default fallback icon
-import DefaultIcon from '/icons/Ollama.svg'; // Adjust the path as necessary
+import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary

 export default function ProvidersTab() {
  const { providers, updateProviderSettings, isLocalModel } = useSettings();
--- a/app/lib/hooks/useSettings.tsx
+++ b/app/lib/hooks/useSettings.tsx
@@ -16,8 +16,11 @@ import commit from '~/commit.json';

 interface CommitData {
  commit: string;
+  version?: string;
 }

+const commitJson: CommitData = commit;
+
 export function useSettings() {
  const providers = useStore(providersStore);
  const debug = useStore(isDebugMode);
@@ -31,7 +34,7 @@ export function useSettings() {
  const checkIsStableVersion = async () => {
    try {
      const stableResponse = await fetch(
-        'https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/stable/app/commit.json',
+        `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/refs/tags/v${commitJson.version}/app/commit.json`,
      );

      if (!stableResponse.ok) {
@@ -99,13 +102,19 @@ export function useSettings() {

    // load latest branch setting from cookies or determine based on version
    const savedLatestBranch = Cookies.get('isLatestBranch');
+    let checkCommit = Cookies.get('commitHash');

-    if (savedLatestBranch === undefined) {
+    if (checkCommit === undefined) {
+      checkCommit = commit.commit;
+    }
+
+    if (savedLatestBranch === undefined || checkCommit !== commit.commit) {
      // If setting hasn't been set by user, check version
      checkIsStableVersion().then((isStable) => {
        const shouldUseLatest = !isStable;
        latestBranchStore.set(shouldUseLatest);
        Cookies.set('isLatestBranch', String(shouldUseLatest));
+        Cookies.set('commitHash', String(commit.commit));
      });
    } else {
      latestBranchStore.set(savedLatestBranch === 'true');
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -1,4 +1,5 @@
 import { type ActionFunctionArgs } from '@remix-run/cloudflare';
+import { createDataStream } from 'ai';
 import { MAX_RESPONSE_SEGMENTS, MAX_TOKENS } from '~/lib/.server/llm/constants';
 import { CONTINUE_PROMPT } from '~/lib/common/prompts/prompts';
 import { streamText, type Messages, type StreamingOptions } from '~/lib/.server/llm/stream-text';
@@ -9,17 +10,15 @@ export async function action(args: ActionFunctionArgs) {
  return chatAction(args);
 }

-function parseCookies(cookieHeader: string) {
-  const cookies: any = {};
+function parseCookies(cookieHeader: string): Record<string, string> {
+  const cookies: Record<string, string> = {};

-  // Split the cookie string by semicolons and spaces
  const items = cookieHeader.split(';').map((cookie) => cookie.trim());

  items.forEach((item) => {
    const [name, ...rest] = item.split('=');

    if (name && rest) {
-      // Decode the name and value, and join value parts in case it contains '='
      const decodedName = decodeURIComponent(name.trim());
      const decodedValue = decodeURIComponent(rest.join('=').trim());
      cookies[decodedName] = decodedValue;
@@ -37,8 +36,6 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
  }>();

  const cookieHeader = request.headers.get('Cookie');
-
-  // Parse the cookie's value (returns an object or null if no cookie exists)
  const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
  const providerSettings: Record<string, IProviderSetting> = JSON.parse(
    parseCookies(cookieHeader || '').providers || '{}',
@@ -46,12 +43,42 @@ async function chatAction({ context, request }: ActionFunctionArgs) {

  const stream = new SwitchableStream();

+  const cumulativeUsage = {
+    completionTokens: 0,
+    promptTokens: 0,
+    totalTokens: 0,
+  };
+
  try {
    const options: StreamingOptions = {
      toolChoice: 'none',
-      onFinish: async ({ text: content, finishReason }) => {
+      onFinish: async ({ text: content, finishReason, usage }) => {
+        console.log('usage', usage);
+
+        if (usage) {
+          cumulativeUsage.completionTokens += usage.completionTokens || 0;
+          cumulativeUsage.promptTokens += usage.promptTokens || 0;
+          cumulativeUsage.totalTokens += usage.totalTokens || 0;
+        }
+
        if (finishReason !== 'length') {
-          return stream.close();
+          return stream
+            .switchSource(
+              createDataStream({
+                async execute(dataStream) {
+                  dataStream.writeMessageAnnotation({
+                    type: 'usage',
+                    value: {
+                      completionTokens: cumulativeUsage.completionTokens,
+                      promptTokens: cumulativeUsage.promptTokens,
+                      totalTokens: cumulativeUsage.totalTokens,
+                    },
+                  });
+                },
+                onError: (error: any) => `Custom error: ${error.message}`,
+              }),
+            )
+            .then(() => stream.close());
        }

        if (stream.switches >= MAX_RESPONSE_SEGMENTS) {
@@ -75,7 +102,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
          promptId,
        });

-        return stream.switchSource(result.toAIStream());
+        return stream.switchSource(result.toDataStream());
      },
    };

@@ -89,7 +116,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
      promptId,
    });

-    stream.switchSource(result.toAIStream());
+    stream.switchSource(result.toDataStream());

    return new Response(stream.readable, {
      status: 200,
@@ -98,7 +125,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
      },
    });
  } catch (error: any) {
-    console.log(error);
+    console.error(error);

    if (error.message?.includes('API key')) {
      throw new Response('Invalid or missing API key', {
--- a/app/routes/api.enhancer.ts
+++ b/app/routes/api.enhancer.ts
@@ -1,5 +1,6 @@
 import { type ActionFunctionArgs } from '@remix-run/cloudflare';
-import { StreamingTextResponse, parseStreamPart } from 'ai';
+
+//import { StreamingTextResponse, parseStreamPart } from 'ai';
 import { streamText } from '~/lib/.server/llm/stream-text';
 import { stripIndents } from '~/utils/stripIndent';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
@@ -73,32 +74,32 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {
            `[Model: ${model}]\n\n[Provider: ${providerName}]\n\n` +
            stripIndents`
            You are a professional prompt engineer specializing in crafting precise, effective prompts.
-          Your task is to enhance prompts by making them more specific, actionable, and effective.
+            Your task is to enhance prompts by making them more specific, actionable, and effective.

-          I want you to improve the user prompt that is wrapped in \`<original_prompt>\` tags.
+            I want you to improve the user prompt that is wrapped in \`<original_prompt>\` tags.

-          For valid prompts:
-          - Make instructions explicit and unambiguous
-          - Add relevant context and constraints
-          - Remove redundant information
-          - Maintain the core intent
-          - Ensure the prompt is self-contained
-          - Use professional language
+            For valid prompts:
+            - Make instructions explicit and unambiguous
+            - Add relevant context and constraints
+            - Remove redundant information
+            - Maintain the core intent
+            - Ensure the prompt is self-contained
+            - Use professional language

-          For invalid or unclear prompts:
-          - Respond with a clear, professional guidance message
-          - Keep responses concise and actionable
-          - Maintain a helpful, constructive tone
-          - Focus on what the user should provide
-          - Use a standard template for consistency
+            For invalid or unclear prompts:
+            - Respond with clear, professional guidance
+            - Keep responses concise and actionable
+            - Maintain a helpful, constructive tone
+            - Focus on what the user should provide
+            - Use a standard template for consistency

-          IMPORTANT: Your response must ONLY contain the enhanced prompt text.
-          Do not include any explanations, metadata, or wrapper tags.
+            IMPORTANT: Your response must ONLY contain the enhanced prompt text.
+            Do not include any explanations, metadata, or wrapper tags.

-          <original_prompt>
-            ${message}
-          </original_prompt>
-        `,
+            <original_prompt>
+              ${message}
+            </original_prompt>
+          `,
        },
      ],
      env: context.cloudflare.env,
@@ -113,7 +114,7 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {

        for (const line of lines) {
          try {
-            const parsed = parseStreamPart(line);
+            const parsed = JSON.parse(line);

            if (parsed.type === 'text') {
              controller.enqueue(encoder.encode(parsed.value));
@@ -128,7 +129,12 @@ async function enhancerAction({ context, request }: ActionFunctionArgs) {

    const transformedStream = result.toDataStream().pipeThrough(transformStream);

-    return new StreamingTextResponse(transformedStream);
+    return new Response(transformedStream, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+      },
+    });
  } catch (error: unknown) {
    console.log(error);