@streamplace/components 0.8.9 → 0.8.13

package/scripts/compile-translations.js

@@ -0,0 +1,254 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { parse: parseFtl } = require("@fluent/syntax");
+
+// Load language manifest
+const MANIFEST_PATH = path.join(__dirname, "..", "locales", "manifest.json");
+const manifest = JSON.parse(fs.readFileSync(MANIFEST_PATH, "utf-8"));
+
+// Configuration
+const LOCALES_SOURCE_DIR = path.join(__dirname, "..", "locales");
+const LOCALES_OUTPUT_DIR = path.join(__dirname, "..", "public", "locales");
+
+/**
+ * Find all .ftl files in a directory (non-recursive, just top-level)
+ */
+function findFtlFiles(dir) {
+  const files = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (entry.isFile() && entry.name.endsWith(".ftl")) {
+      files.push({
+        path: path.join(dir, entry.name),
+        namespace: path.basename(entry.name, ".ftl"),
+      });
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Parse FTL content using @fluent/syntax and extract messages
+ */
+function extractMessagesFromFtl(content) {
+  const messages = {};
+
+  try {
+    const resource = parseFtl(content);
+
+    for (const entry of resource.body) {
+      // Only process Message entries (not Comments, Terms, etc.)
+      if (entry.type === "Message" && entry.id) {
+        const key = entry.id.name;
+
+        // For now, just serialize the pattern back to FTL format
+        // i18next-fluent will handle the actual parsing at runtime
+        if (entry.value) {
+          messages[key] = serializePattern(entry.value);
+        }
+      }
+    }
+  } catch (error) {
+    console.error("Error parsing FTL:", error.message);
+    throw error;
+  }
+
+  return messages;
+}
+
+/**
+ * Serialize a Fluent pattern back to FTL string format
+ * This is a simple serializer - @fluent/syntax has a full serializer
+ * but we just need the pattern text for JSON storage
+ */
+function serializePattern(pattern) {
+  if (!pattern || !pattern.elements) {
+    return "";
+  }
+
+  let result = "";
+
+  for (const element of pattern.elements) {
+    if (element.type === "TextElement") {
+      result += element.value;
+    } else if (element.type === "Placeable") {
+      result += serializePlaceable(element);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Serialize a placeable (variables, select expressions, etc.)
+ */
+function serializePlaceable(placeable) {
+  if (!placeable.expression) {
+    return "{}";
+  }
+
+  const expr = placeable.expression;
+
+  if (expr.type === "VariableReference") {
+    return `{$${expr.id.name}}`;
+  } else if (expr.type === "SelectExpression") {
+    let result = `{${serializeInlineExpression(expr.selector)} ->`;
+
+    for (const variant of expr.variants) {
+      const key =
+        variant.key.type === "Identifier"
+          ? `[${variant.key.name}]`
+          : `[${variant.key.value}]`;
+
+      result += `\n   ${variant.default ? "*" : ""}${key} ${serializePattern(variant.value)}`;
+    }
+
+    result += "\n  }";
+    return result;
+  } else if (expr.type === "FunctionReference") {
+    const args = expr.arguments.positional
+      .map((arg) => serializeInlineExpression(arg))
+      .join(", ");
+    return `{${expr.id.name}(${args})}`;
+  }
+
+  return "{}";
+}
+
+/**
+ * Serialize inline expressions (for function arguments, etc.)
+ */
+function serializeInlineExpression(expr) {
+  if (expr.type === "VariableReference") {
+    return `$${expr.id.name}`;
+  } else if (expr.type === "NumberLiteral") {
+    return expr.value;
+  } else if (expr.type === "StringLiteral") {
+    return `"${expr.value}"`;
+  }
+
+  return "";
+}
+
+/**
+ * Main compilation function
+ */
+function compileTranslations() {
+  console.log("🌍 Compiling translation files...");
+
+  if (!fs.existsSync(LOCALES_SOURCE_DIR)) {
+    console.error(`❌ Locales directory not found: ${LOCALES_SOURCE_DIR}`);
+    process.exit(1);
+  }
+
+  // Create output directory if it doesn't exist
+  if (!fs.existsSync(LOCALES_OUTPUT_DIR)) {
+    fs.mkdirSync(LOCALES_OUTPUT_DIR, { recursive: true });
+  }
+
+  // Get supported locales from manifest
+  const manifestLocales = manifest.supportedLocales;
+  const locales = manifestLocales.filter((locale) => {
+    const localeDir = path.join(LOCALES_SOURCE_DIR, locale);
+    return fs.existsSync(localeDir) && fs.statSync(localeDir).isDirectory();
+  });
+
+  if (locales.length === 0) {
+    console.error(`❌ No locale directories found in ${LOCALES_SOURCE_DIR}`);
+    process.exit(1);
+  }
+
+  let totalFiles = 0;
+
+  // Process each locale
+  for (const locale of locales) {
+    const localeSourceDir = path.join(LOCALES_SOURCE_DIR, locale);
+    const localeOutputDir = path.join(LOCALES_OUTPUT_DIR, locale);
+
+    console.log(`📦 Processing locale: ${locale}`);
+
+    // Create locale output directory
+    if (!fs.existsSync(localeOutputDir)) {
+      fs.mkdirSync(localeOutputDir, { recursive: true });
+    }
+
+    // Find all .ftl files for this locale
+    const ftlFiles = findFtlFiles(localeSourceDir);
+
+    if (ftlFiles.length === 0) {
+      console.warn(`⚠️  No .ftl files found in ${localeSourceDir}`);
+      continue;
+    }
+
+    // Process each .ftl file as a separate namespace
+    for (const { path: ftlPath, namespace } of ftlFiles) {
+      try {
+        const content = fs.readFileSync(ftlPath, "utf-8");
+        const messages = extractMessagesFromFtl(content);
+
+        if (Object.keys(messages).length === 0) {
+          console.warn(`⚠️  No messages found in ${ftlPath}`);
+          continue;
+        }
+
+        // Write namespace JSON file
+        const outputPath = path.join(localeOutputDir, `${namespace}.json`);
+        fs.writeFileSync(
+          outputPath,
+          JSON.stringify(messages, null, 2),
+          "utf-8",
+        );
+
+        console.log(
+          `  ✅ ${namespace}: ${Object.keys(messages).length} keys → ${path.relative(process.cwd(), outputPath)}`,
+        );
+        totalFiles++;
+      } catch (error) {
+        console.error(`❌ Error processing ${ftlPath}:`, error.message);
+      }
+    }
+  }
+
+  console.log(
+    `🎉 Compilation complete! ${totalFiles} namespace files generated.`,
+  );
+}
+
+/**
+ * Copy compiled translations to app/public/locales
+ */
+function copyToApp() {
+  const appPublicLocales = path.join(
+    __dirname,
+    "..",
+    "..",
+    "app",
+    "public",
+    "locales",
+  );
+
+  console.log("\n📋 Copying translations to app...");
+
+  // Remove old locales directory in app
+  if (fs.existsSync(appPublicLocales)) {
+    fs.rmSync(appPublicLocales, { recursive: true, force: true });
+  }
+
+  // Copy compiled locales to app
+  fs.cpSync(LOCALES_OUTPUT_DIR, appPublicLocales, { recursive: true });
+
+  console.log(`✅ Copied to ${path.relative(process.cwd(), appPublicLocales)}`);
+}
+
+// Run the compilation
+compileTranslations();
+
+// Copy to app if it exists
+const appPath = path.join(__dirname, "..", "..", "app");
+if (fs.existsSync(appPath)) {
+  copyToApp();
+}

package/scripts/extract-i18n.js

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+
+/**
+ * i18n key extraction script
+ * 1. Scans the codebase for i18n keys (t('key'), Trans components, etc)
+ * 2. Extracts keys into namespace JSON files (common.json, settings.json, etc)
+ * 3. Migrates new keys to corresponding .ftl files for translation
+ *
+ * Usage:
+ *   node extract-i18n.js                    # Extract keys and report new ones
+ *   node extract-i18n.js --add-to=common    # Add new keys to common.ftl
+ *   node extract-i18n.js --add-to=settings  # Add new keys to settings.ftl
+ */
+
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const addToNamespace = args
+  .find((arg) => arg.startsWith("--add-to="))
+  ?.split("=")[1];
+
+// Paths
+const COMPONENTS_ROOT = path.join(__dirname, "..");
+const APP_ROOT = path.join(__dirname, "..", "..", "app");
+const MANIFEST_PATH = path.join(COMPONENTS_ROOT, "locales/manifest.json");
+const LOCALES_FTL_DIR = path.join(COMPONENTS_ROOT, "locales");
+const LOCALES_JSON_DIR = path.join(COMPONENTS_ROOT, "public/locales");
+
+// Load manifest
+const manifest = JSON.parse(fs.readFileSync(MANIFEST_PATH, "utf8"));
+
+// Configuration for i18next-parser
+const parserConfig = {
+  contextSeparator: "_",
+  createOldCatalogs: false,
+  defaultNamespace: "messages",
+  defaultValue: "",
+  indentation: 2,
+  keepRemoved: true,
+  keySeparator: false,
+  namespaceSeparator: false,
+
+  lexers: {
+    js: ["JavascriptLexer"],
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
+    html: false,
+    htm: false,
+    handlebars: false,
+    hbs: false,
+  },
+
+  locales: manifest.supportedLocales,
+  output: path.join(LOCALES_JSON_DIR, "$LOCALE/$NAMESPACE.json"),
+  input: [
+    path.join(COMPONENTS_ROOT, "src/**/*.{js,jsx,ts,tsx}"),
+    path.join(APP_ROOT, "src/**/*.{js,jsx,ts,tsx}"),
+    path.join(APP_ROOT, "components/**/*.{js,jsx,ts,tsx}"),
+    "!**/node_modules/**",
+    "!**/dist/**",
+    "!**/*.test.{js,jsx,ts,tsx}",
+    "!**/*.spec.{js,jsx,ts,tsx}",
+  ],
+
+  verbose: true,
+  sort: true,
+  failOnWarnings: false,
+  failOnUpdate: false,
+};
+
+/**
+ * Extract keys from codebase using i18next-parser
+ */
+function extractKeys() {
+  const configPath = path.join(__dirname, ".i18next-parser.config.js");
+  const configContent = `module.exports = ${JSON.stringify(parserConfig, null, 2)};`;
+
+  try {
+    fs.writeFileSync(configPath, configContent);
+    console.log("🔍 Extracting i18n keys from codebase...");
+
+    execSync(`npx i18next-parser --config ${configPath}`, {
+      stdio: "inherit",
+      cwd: __dirname,
+    });
+
+    console.log("✅ Keys extracted successfully!");
+    return true;
+  } catch (error) {
+    console.error("❌ Error extracting i18n keys:", error.message);
+    return false;
+  } finally {
+    if (fs.existsSync(configPath)) {
+      fs.unlinkSync(configPath);
+    }
+  }
+}
+
+/**
+ * Read existing keys from .ftl files in a locale directory
+ * Returns a map of namespace -> Set of keys
+ */
+function getExistingFtlKeys(localeDir) {
+  const keysByNamespace = {};
+
+  if (!fs.existsSync(localeDir)) {
+    return keysByNamespace;
+  }
+
+  const ftlFiles = fs
+    .readdirSync(localeDir)
+    .filter((file) => file.endsWith(".ftl"));
+
+  for (const file of ftlFiles) {
+    const namespace = path.basename(file, ".ftl");
+    const keys = new Set();
+
+    const content = fs.readFileSync(path.join(localeDir, file), "utf8");
+    const lines = content.split("\n");
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      const keyMatch = trimmed.match(/^([a-zA-Z][a-zA-Z0-9_-]*)\s*=/);
+      if (keyMatch) {
+        keys.add(keyMatch[1]);
+      }
+    }
+
+    keysByNamespace[namespace] = keys;
+  }
+
+  return keysByNamespace;
+}
+
+/**
+ * Get all namespaces (json files) in the locale directory
+ */
+function getNamespaces(localeJsonDir) {
+  if (!fs.existsSync(localeJsonDir)) {
+    return [];
+  }
+
+  return fs
+    .readdirSync(localeJsonDir)
+    .filter((file) => file.endsWith(".json"))
+    .map((file) => path.basename(file, ".json"));
+}
+
+/**
+ * Add new keys to a .ftl file
+ */
+function addKeysToFtlFile(localeDir, namespace, newKeys, locale) {
+  const targetFile = path.join(localeDir, `${namespace}.ftl`);
+
+  // Create file with header if it doesn't exist
+  if (!fs.existsSync(localeDir)) {
+    fs.mkdirSync(localeDir, { recursive: true });
+  }
+
+  if (!fs.existsSync(targetFile)) {
+    const languageName = manifest.languages[locale]?.name || locale;
+    const namespaceName =
+      namespace.charAt(0).toUpperCase() + namespace.slice(1);
+    const header = `# ${namespaceName} translations - ${languageName}\n\n`;
+    fs.writeFileSync(targetFile, header);
+  }
+
+  // Append new keys
+  let content = fs.readFileSync(targetFile, "utf8");
+
+  if (!content.endsWith("\n")) {
+    content += "\n";
+  }
+
+  content += "\n# Newly extracted keys\n";
+  content += newKeys.map((key) => `${key} = ${key}`).join("\n") + "\n";
+
+  fs.writeFileSync(targetFile, content);
+
+  return targetFile;
+}
+
+/**
+ * Migrate extracted JSON keys to .ftl files
+ */
+function migrateKeysToFtl() {
+  console.log("\n🔄 Analyzing extracted keys...");
+
+  const newKeysByLocaleAndNamespace = {}; // locale -> namespace -> [keys]
+
+  // Process each locale
+  for (const locale of manifest.supportedLocales) {
+    const localeJsonDir = path.join(LOCALES_JSON_DIR, locale);
+    const localeFtlDir = path.join(LOCALES_FTL_DIR, locale);
+
+    if (!fs.existsSync(localeJsonDir)) {
+      console.log(`⚠️  No JSON files found for ${locale}`);
+      continue;
+    }
+
+    // Get all namespaces (json files)
+    const namespaces = getNamespaces(localeJsonDir);
+
+    if (namespaces.length === 0) {
+      console.log(`⚠️  No namespace files found for ${locale}`);
+      continue;
+    }
+
+    // Get existing keys from .ftl files
+    const existingKeysByNamespace = getExistingFtlKeys(localeFtlDir);
+
+    // Process each namespace
+    for (const namespace of namespaces) {
+      const jsonPath = path.join(localeJsonDir, `${namespace}.json`);
+      const jsonContent = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+      const extractedKeys = Object.keys(jsonContent);
+
+      // Get existing keys for this namespace
+      const existingKeys = existingKeysByNamespace[namespace] || new Set();
+
+      // Find new keys
+      const newKeys = extractedKeys.filter((key) => !existingKeys.has(key));
+
+      if (newKeys.length > 0) {
+        if (!newKeysByLocaleAndNamespace[locale]) {
+          newKeysByLocaleAndNamespace[locale] = {};
+        }
+        newKeysByLocaleAndNamespace[locale][namespace] = newKeys;
+      }
+    }
+  }
+
+  // Check if there are any new keys
+  const hasNewKeys = Object.keys(newKeysByLocaleAndNamespace).length > 0;
+
+  if (!hasNewKeys) {
+    console.log(
+      "\n🎉 No new keys found. All extracted keys already exist in .ftl files.",
+    );
+    return;
+  }
+
+  // Display found keys
+  console.log("\n📊 New keys found:");
+  for (const locale of Object.keys(newKeysByLocaleAndNamespace)) {
+    console.log(`\n${locale}:`);
+    for (const namespace of Object.keys(newKeysByLocaleAndNamespace[locale])) {
+      const keys = newKeysByLocaleAndNamespace[locale][namespace];
+      console.log(`  📝 ${namespace} (${keys.length} new keys):`);
+      keys.forEach((key) => console.log(`     - ${key}`));
+    }
+  }
+
+  // If --add-to flag is provided, add keys to that namespace
+  if (addToNamespace) {
+    console.log(`\n✍️  Adding new keys to ${addToNamespace}.ftl files...`);
+
+    let totalAdded = 0;
+    const processedFiles = [];
+
+    for (const locale of Object.keys(newKeysByLocaleAndNamespace)) {
+      const localeFtlDir = path.join(LOCALES_FTL_DIR, locale);
+      const namespacesForLocale = newKeysByLocaleAndNamespace[locale];
+
+      // Collect all new keys across all namespaces for this locale
+      const allNewKeys = [];
+      for (const namespace of Object.keys(namespacesForLocale)) {
+        allNewKeys.push(...namespacesForLocale[namespace]);
+      }
+
+      if (allNewKeys.length === 0) continue;
+
+      // Add all keys to the specified namespace
+      const targetFile = addKeysToFtlFile(
+        localeFtlDir,
+        addToNamespace,
+        allNewKeys,
+        locale,
+      );
+      processedFiles.push(path.relative(process.cwd(), targetFile));
+      totalAdded += allNewKeys.length;
+
+      console.log(
+        `✅ ${locale}: Added ${allNewKeys.length} keys to ${addToNamespace}.ftl`,
+      );
+    }
+
+    console.log(
+      `\n🎉 Migration complete! Added ${totalAdded} new keys to ${addToNamespace}.ftl files.`,
+    );
+    console.log("\nModified files:");
+    processedFiles.forEach((file) => console.log(`   📄 ${file}`));
+
+    console.log("\n💡 Next steps:");
+    console.log("   1. Review the new keys in your .ftl files");
+    console.log("   2. Replace placeholder values with actual translations");
+    console.log("   3. Run `pnpm i18n:compile` to update compiled JSON files");
+  } else {
+    // Just report
+    let totalNewKeys = 0;
+    const namespaceSet = new Set();
+
+    for (const locale of Object.keys(newKeysByLocaleAndNamespace)) {
+      for (const namespace of Object.keys(
+        newKeysByLocaleAndNamespace[locale],
+      )) {
+        namespaceSet.add(namespace);
+        totalNewKeys += newKeysByLocaleAndNamespace[locale][namespace].length;
+      }
+    }
+
+    console.log(
+      `\n💡 Found ${totalNewKeys} new keys across ${namespaceSet.size} namespace(s).`,
+    );
+    console.log("\nTo add these keys to a specific namespace file, run:");
+    Array.from(namespaceSet).forEach((ns) => {
+      console.log(`   node extract-i18n.js --add-to=${ns}`);
+    });
+  }
+}
+
+function main() {
+  const success = extractKeys();
+
+  if (success) {
+    migrateKeysToFtl();
+  } else {
+    process.exit(1);
+  }
+}
+
+main();

package/src/components/chat/chat-box.tsx

@@ -12,6 +12,7 @@ import {
   useLivestream,
   useReplyToMessage,
   useSetReplyToMessage,
+  useTheme,
   View,
 } from "../../";
 import {
@@ -63,6 +64,8 @@ export function ChatBox({
 
   let linfo = useLivestream();
 
+  const { theme } = useTheme();
+
   const chat = useChat();
   const createChatMessage = useCreateChatMessage();
   const replyTo = useReplyToMessage();
@@ -354,6 +357,19 @@ export function ChatBox({
                 k.preventDefault();
                 submit();
               }
+            } else if (k.nativeEvent.key === "Tab") {
+              if (showSuggestions) {
+                k.preventDefault();
+                const handles = Array.from(filteredAuthors.keys());
+                if (handles.length > 0) {
+                  handleMentionSelect(handles[highlightedIndex]);
+                }
+              } else if (showEmojiSuggestions) {
+                k.preventDefault();
+                if (filteredEmojis.length > 0) {
+                  handleEmojiSelect(filteredEmojis[highlightedIndex]);
+                }
+              }
             } else if (k.nativeEvent.key === "ArrowUp") {
               if (showSuggestions || showEmojiSuggestions) {
                 k.preventDefault();
@@ -387,14 +403,17 @@ export function ChatBox({
           submitBehavior="submit"
           placeholder="Type a message..."
         />
-        <Button
-          disabled={submitting}
-          variant="secondary"
-          style={{ borderRadius: 16, height: 36, minWidth: 80 }}
-          onPress={submit}
-        >
-          {submitting ? <Loader /> : "Send"}
-        </Button>
+        <View>
+          <Button
+            disabled={submitting}
+            variant="secondary"
+            width="min"
+            style={{ borderRadius: 16, height: 43 }}
+            onPress={submit}
+          >
+            {submitting ? <Loader /> : "Send"}
+          </Button>
+        </View>
       </View>
       {showSuggestions && (
         <MentionSuggestions
@@ -466,7 +485,7 @@ export function ChatBox({
                 setIsChatVisible?.(false);
               }}
             >
-              <ExternalLink size={16} />
+              <ExternalLink color={theme.colors.primaryForeground} size={16} />
             </Button>
           )}
         </View>

package/src/components/chat/chat-message.tsx

@@ -8,6 +8,7 @@ import { Linking, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { RichtextSegment, segmentize } from "../../lib/facet";
 import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
+import { formatHandleWithAt } from "../../utils/format-handle";
 import { atoms, colors, layout } from "../ui";
 
 interface Facet {
@@ -138,7 +139,7 @@ export const RenderChatMessage = memo(
                   fontWeight: "thin",
                 }}
               >
-                @{(replyTo.author as any).handle}
+                {formatHandleWithAt(replyTo.author)}
               </Text>{" "}
               <Text
                 style={{
@@ -181,7 +182,7 @@ export const RenderChatMessage = memo(
                 },
               ]}
             >
-              @{item.author.handle}
+              {formatHandleWithAt(item.author)}
             </Text>
             :{" "}
             <RichTextMessage