fix: tool playground language bugs

apps/shinkai-desktop/src/components/playground-tool/components/tool-playground.tsx

@@ -533,8 +533,8 @@ function PlaygroundToolEditor({
                               key={resetCounter}
                               onSubmit={handleApplyChangesCodeSubmit}
                             >
-                              <div className="flex h-[45px] shrink-0 items-center justify-between rounded-t-lg border-b border-gray-400 bg-[#0d1117] px-3 py-2">
-                                <span className="inline-flex items-center gap-2 pl-3 text-xs font-medium text-gray-50">
+                              <div className="flex h-[40px] shrink-0 items-center justify-between rounded-t-lg border-b border-gray-400 bg-[#0d1117] px-3 py-2">
+                                <span className="text-gray-80 inline-flex items-center gap-2 pl-2 text-xs font-medium">
                                   {' '}
                                   {detectLanguage(toolCode)}{' '}
                                   {isDirtyCodeEditor && (
@@ -551,18 +551,18 @@ function PlaygroundToolEditor({
                                       transition={{ duration: 0.2 }}
                                     >
                                       <Button
-                                        className="!h-[32px] min-w-[80px] rounded-xl"
+                                        className="!h-[28px] rounded-lg border-0 bg-transparent"
                                         onClick={resetToolCode}
                                         size="sm"
-                                        variant="outline"
+                                        variant="ghost"
                                       >
                                         Reset
                                       </Button>
                                       <Button
-                                        className="!h-[28px] min-w-[80px] rounded-xl"
+                                        className="!h-[28px] rounded-lg border-0 bg-transparent"
                                         size="sm"
                                         type="submit"
-                                        variant="outline"
+                                        variant="ghost"
                                       >
                                         Apply Changes
                                       </Button>

apps/shinkai-desktop/src/components/playground-tool/hooks/use-tool-code.ts

@@ -20,7 +20,7 @@ import { useChatConversationWithOptimisticUpdates } from '../../../pages/chat/ch
 import { useAuth } from '../../../store/auth';
 import { useSettings } from '../../../store/settings';
 import { ToolMetadataSchema } from '../schemas';
-import { extractTypeScriptCode } from '../utils/code';
+import { extractCodeByLanguage, extractCodeLanguage } from '../utils/code';
 
 export const createToolCodeFormSchema = z.object({
   message: z.string().min(1),
@@ -153,13 +153,18 @@ export const useToolCode = ({
     const messageList = conversationData?.pages.flat() ?? [];
     const toolCodesFound = messageList
       .map((message) => {
+        const language = extractCodeLanguage(message.content);
         if (
           message.role === 'assistant' &&
           message.status.type === 'complete'
         ) {
           return {
             messageId: message.messageId,
-            code: extractTypeScriptCode(message.content, currentLanguage) ?? '',
+            code:
+              extractCodeByLanguage(
+                message.content,
+                language ?? currentLanguage,
+              ) ?? '',
           };
         }
       })
@@ -205,8 +210,13 @@ export const useToolCode = ({
       lastMessage?.role === 'assistant' &&
       lastMessage?.status.type === 'complete'
     ) {
+      const language = extractCodeLanguage(lastMessage.content);
+
       const generatedCode =
-        extractTypeScriptCode(lastMessage?.content, currentLanguage) ?? '';
+        extractCodeByLanguage(
+          lastMessage?.content,
+          language ?? currentLanguage,
+        ) ?? '';
       if (generatedCode) {
         baseToolCodeRef.current = generatedCode;
         setToolCode(generatedCode);

apps/shinkai-desktop/src/components/playground-tool/utils/code.ts

@@ -1,38 +1,39 @@
 import { CodeLanguage } from '@shinkai_network/shinkai-message-ts/api/tools/types';
 
-export function extractTypeScriptCode(message: string, language: CodeLanguage) {
+export function extractCodeLanguage(input: string): CodeLanguage | null {
+  const match = input.match(/```(\w+)/);
+  if (!match) {
+    return null;
+  }
+  const [_, language] = match;
+  if (language === 'typescript') {
+    return CodeLanguage.Typescript;
+  }
+  if (language === 'python') {
+    return CodeLanguage.Python;
+  }
+  return null;
+}
+
+export function extractCodeByLanguage(message: string, language: CodeLanguage) {
   const tsCodeMatch = message.match(
     new RegExp(`\`\`\`${language.toLowerCase()}\n([\\s\\S]*?)\n\`\`\``),
   );
   return tsCodeMatch ? tsCodeMatch[1].trim() : null;
 }
 
 export function detectLanguage(code: string): string {
-  const pythonPatterns = [
-    /\bdef\b/,
-    /\bclass\b/,
-    /\bimport\b/,
-    /\basync\s+def\b/,
-    /from\s+\w+\s+import\b/,
-    /#.*$/,
-  ];
+  const typeScriptRegex =
+    /(interface\s+\w+\s*{)|(type\s+\w+\s*=)|(function\s+\w+\s*<\w+>)/;
+  const pythonRegex = /^\s*def\s+\w+\s*\(.*\):|^\s*class\s+\w+\s*\(?.*?\)?:/m;
 
-  const typescriptPatterns = [
-    /\bfunction\b/,
-    /\binterface\b/,
-    /\btype\b\s+\w+\s*=/,
-    /\bexport\s+(default\s+)?/,
-    /\/\/.*$/,
-    /:\s*\w+(\[\])?/,
-  ];
-
-  const isPython = pythonPatterns.some((pattern) => pattern.test(code));
-
-  const isTypeScript = typescriptPatterns.some((pattern) => pattern.test(code));
-
-  if (isPython) return 'Python';
-  if (isTypeScript) return 'TypeScript';
-  return 'Unknown';
+  if (typeScriptRegex.test(code)) {
+    return 'TypeScript';
+  } else if (pythonRegex.test(code)) {
+    return 'Python';
+  } else {
+    return 'Unknown';
+  }
 }
 
 export function getLanguage(language: string): CodeLanguage {

apps/shinkai-desktop/src/pages/tasks.tsx

@@ -42,7 +42,6 @@ export const Tasks = () => {
 
   return (
     <SimpleLayout
-      classname="max-w-4xl"
       headerRightElement={
         <div className="flex items-center gap-2">
           <Link

apps/shinkai-desktop/src/pages/tools.tsx

@@ -70,7 +70,6 @@ export const Tools = () => {
 
   return (
     <SimpleLayout
-      classname="max-w-3xl"
       headerRightElement={
         <div className="flex items-center gap-2">
           <ImportToolModal />