create-blocklet 0.9.16 → 0.9.17

package/index.js

@@ -45,6 +45,11 @@ const templates = [
     display: '[dapp] react + express + typescript',
     color: yellow,
   },
+  {
+    name: 'react-aigne-dapp',
+    display: '[dapp] react + express + AIGNE Framework',
+    color: yellow,
+  },
   {
     name: 'did-wallet-dapp',
     display: '[dapp: did-wallet] Full stack app (react.js + express.js) with DID Wallet integration',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",

package/templates/did-connect-dapp/package.json

@@ -77,7 +77,7 @@
     "rimraf": "^5.0.10",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.4.8",
-    "vite-plugin-blocklet": "^0.9.16",
+    "vite-plugin-blocklet": "^0.9.17",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.8"
   },

package/templates/did-wallet-dapp/package.json

@@ -52,7 +52,7 @@
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.4.8",
     "vite-node": "^2.1.1",
-    "vite-plugin-blocklet": "^0.9.16",
+    "vite-plugin-blocklet": "^0.9.17",
     "vite-plugin-require": "^1.2.14",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.8"

package/templates/react-aigne-dapp/.eslintrc.js

@@ -0,0 +1,13 @@
+const { join } = require('path');
+
+module.exports = {
+  root: true,
+  extends: '@arcblock/eslint-config-ts',
+  parserOptions: {
+    project: [join(__dirname, 'tsconfig.eslint.json'), join(__dirname, 'tsconfig.json')],
+  },
+  rules: {
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'no-await-in-loop': 'warn',
+  },
+};

package/templates/react-aigne-dapp/README.md

@@ -0,0 +1,34 @@
+## PROJECT_DESCRIPTION
+This blocklet is a dapp project, which means this is a full-stack application. It's contained both `server` and `client` code.
+
+## Launch on Blocklet Server
+
+[![Launch on Blocklet Server](https://assets.arcblock.io/icons/launch_on_blocklet_server.svg)](https://install.arcblock.io/launch?action=blocklet-install&meta_url=https%3A%2F%2Fgithub.com%2Fblocklet%2Fpages-kit%2Freleases%2Fdownload%2Fv0.1.33%2Fblocklet.json)
+
+## FILE_STRUCTURE
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+  - index.html - main html file, template for react
+- screenshots/ - Screenshots
+- api/
+  - src/ - Api side code
+    - hooks/ - blocklet lifecycle hooks
+    - libs/ - Api side libraries
+    - middlewares/ - Api side middlewares
+    - routes/ - Api side routes
+    - index.ts - Api side entry point
+- src/ - Client side code (A standard react app structure)
+- .env - Environment variables
+- .env.local - Local environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file

package/templates/react-aigne-dapp/api/dev.ts

@@ -0,0 +1,7 @@
+import { app, server } from './src';
+
+import('vite-plugin-blocklet').then(({ setupClient }) => {
+  setupClient(app, {
+    server,
+  });
+});

package/templates/react-aigne-dapp/api/src/agents/chatbot.ts

@@ -0,0 +1,30 @@
+import { LLMAgent } from '@aigne/core';
+import { runtime } from './runtime';
+
+const chatbot = LLMAgent.create({
+  context: runtime,
+  name: 'chatbot',
+  inputs: {
+    question: {
+      type: 'string',
+      required: true,
+    },
+  },
+  modelOptions: {
+    model: 'gpt-4o',
+    temperature: 0.1,
+  },
+  messages: [
+    { role: 'system', content: 'You are a AI chat bot' },
+    { role: 'user', content: '{{question}}' },
+  ],
+  outputs: {
+    $text: {
+      type: 'string',
+      required: true,
+    },
+  },
+});
+
+// eslint-disable-next-line import/prefer-default-export
+export { chatbot };

package/templates/react-aigne-dapp/api/src/agents/index.ts

@@ -0,0 +1 @@
+export * from './chatbot';

package/templates/react-aigne-dapp/api/src/agents/runtime.ts

@@ -0,0 +1,16 @@
+import { OpenaiLLMModel } from '@aigne/core';
+import { AIGNERuntime } from '@aigne/runtime';
+import config from '@blocklet/sdk/lib/config';
+
+export const llmModel = new OpenaiLLMModel({
+  model: 'gpt-4o-mini',
+  apiKey: config.env.OPENAI_API_KEY || '',
+});
+
+export const runtime = new AIGNERuntime({
+  llmModel,
+});
+
+config.events.on(config.Events.envUpdate, () => {
+  llmModel.setApiKey(config.env.OPENAI_API_KEY || '');
+});

package/templates/react-aigne-dapp/api/src/agents/type.ts

@@ -0,0 +1,4 @@
+export interface ChatbotResponse {
+  $text: string;
+  status?: { loading?: boolean; message?: string };
+}

package/templates/react-aigne-dapp/api/src/index.ts

@@ -0,0 +1,51 @@
+import 'express-async-errors';
+import 'reflect-metadata';
+import path from 'path';
+
+import cookieParser from 'cookie-parser';
+import cors from 'cors';
+import dotenv from 'dotenv-flow';
+import express, { ErrorRequestHandler } from 'express';
+import fallback from '@blocklet/sdk/lib/middlewares/fallback';
+import { createMiddleware } from '@aigne/runtime/middleware';
+import logger from './libs/logger';
+import { runtime } from './agents/runtime';
+import './agents';
+
+dotenv.config();
+
+const { name, version } = require('../../package.json');
+
+export const app = express();
+
+app.set('trust proxy', true);
+app.use(cookieParser());
+app.use(express.json({ limit: '1 mb' }));
+app.use(express.urlencoded({ extended: true, limit: '1 mb' }));
+app.use(cors());
+
+app.use(createMiddleware(runtime));
+
+const router = express.Router();
+app.use(router);
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  const staticDir = path.resolve(process.env.BLOCKLET_APP_DIR!, 'dist');
+  app.use(express.static(staticDir, { maxAge: '30d', index: false }));
+  app.use(fallback('index.html', { root: staticDir }));
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  app.use(<ErrorRequestHandler>((err, _req, res, _next) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  }));
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT!, 10);
+
+export const server = app.listen(port, (err?: any) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});

package/templates/react-aigne-dapp/api/src/libs/auth.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+import AuthStorage from '@arcblock/did-auth-storage-nedb';
+import getWallet from '@blocklet/sdk/lib/wallet';
+import WalletAuthenticator from '@blocklet/sdk/lib/wallet-authenticator';
+import WalletHandler from '@blocklet/sdk/lib/wallet-handler';
+
+import env from './env';
+
+export const wallet = getWallet();
+export const authenticator = new WalletAuthenticator();
+export const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});

package/templates/react-aigne-dapp/api/src/libs/env.ts

@@ -0,0 +1,6 @@
+import env from '@blocklet/sdk/lib/env';
+
+export default {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/templates/react-aigne-dapp/api/src/libs/logger.ts

@@ -0,0 +1,3 @@
+const logger = console;
+
+export default logger;

package/templates/react-aigne-dapp/api/third.d.ts

@@ -0,0 +1,17 @@
+declare module 'vite-plugin-blocklet';
+
+declare module 'express-history-api-fallback';
+
+declare module 'express-async-errors';
+
+namespace Express {
+  interface Request {
+    user?: {
+      did: string;
+      role: string;
+      fullName: string;
+      provider: string;
+      walletOS: string;
+    };
+  }
+}

package/templates/react-aigne-dapp/blocklet.md

@@ -0,0 +1,3 @@
+# template-aigne-react
+
+A react template for creating a new blocklet project.

package/templates/react-aigne-dapp/blocklet.yml

@@ -0,0 +1,55 @@
+title: Blocklet Template React AIGNE Framework
+description: A Blocklet DAPP blocklet with AIGNE Framework
+keywords:
+  - blocklet
+  - react
+  - aigne
+group: dapp
+name: react-aigne-dapp
+did: 'z8ia3pSfT7UZVjCjGq9PD78GQrdwzptd6iRDG'
+main: api/dist/index.js
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.2.8
+version: 0.1.0
+logo: logo.png
+files:
+  - dist
+  - logo.png
+  - screenshots
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+payment:
+  price: []
+  share: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.16.28'
+  os: '*'
+  cpu: '*'
+scripts:
+  dev: npm run start
+capabilities: {}
+screenshots: []
+components: []
+environments:
+  - name: OPENAI_API_KEY
+    description: 'OpenAI API Key'
+    required: true
+    default: ''
+    secure: true
+    shared: false

package/templates/react-aigne-dapp/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#4F6AF5" />
+</head>
+
+<body>
+  <noscript> You need to enable JavaScript to run this app. </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>

package/templates/react-aigne-dapp/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "template-react-aigne-dapp",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "blocklet dev",
+    "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "start": "cross-env NODE_ENV=development nodemon api/dev.ts -w api",
+    "clean": "node scripts/build-clean.mjs",
+    "bundle": "tsc --noEmit && npm run bundle:client && npm run bundle:api",
+    "bundle:client": "vite build",
+    "bundle:api": "npm run clean && tsc -p tsconfig.api.json && blocklet bundle --compact --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "prepare": "npx simple-git-hooks",
+    "bump-version": "zx --quiet scripts/bump-version.mjs"
+  },
+  "lint-staged": {
+    "*.{mjs,js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@arcblock/did-connect": "^2.11.23",
+    "@aigne/core": "1.0.8",
+    "@aigne/memory": "1.0.8",
+    "@aigne/runtime": "1.0.8",
+    "@arcblock/did-auth": "^1.19.2",
+    "@arcblock/did-auth-storage-nedb": "^1.7.1",
+    "@blocklet/sdk": "^1.16.37",
+    "@ocap/client": "^1.19.2",
+    "@ocap/mcrypto": "^1.19.2",
+    "@ocap/wallet": "^1.19.2",
+    "axios": "^1.7.7",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^4.1.0",
+    "express": "^4.21.0",
+    "express-async-errors": "^3.1.1",
+    "immer": "^10.1.1",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^6.2.1",
+    "nanoid": "^3.3.7",
+    "react-markdown": "^9.0.1",
+    "react-scroll-to-bottom": "^4.2.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "reflect-metadata": "^0.2.2",
+    "remark-gfm": "^4.0.0",
+    "ufo": "^1.5.4",
+    "@blocklet/ui-react": "^2.11.29"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config": "^0.3.3",
+    "@arcblock/eslint-config-ts": "^0.3.3",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/cookie-parser": "^1.4.7",
+    "@types/cors": "^2.8.17",
+    "@types/dotenv-flow": "^3.3.3",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.16.10",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@types/react-scroll-to-bottom": "^4.2.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "bumpp": "^9.6.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.1",
+    "import-sort-style-module": "^6.0.0",
+    "lint-staged": "^15.2.10",
+    "nodemon": "^3.1.7",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.3",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-router-dom": "^6.26.2",
+    "rimraf": "^5.0.10",
+    "simple-git-hooks": "^2.11.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vite-plugin-blocklet": "^0.9.17",
+    "vite-plugin-svgr": "^4.2.0",
+    "zx": "^8.1.8"
+  },
+  "resolutions": {
+    "@aigne/core": "1.0.8",
+    "@aigne/memory": "1.0.8",
+    "@aigne/runtime": "1.0.8"
+  },
+  "importSort": {
+    ".js, .jsx, .mjs": {
+      "parser": "babylon",
+      "style": "module"
+    },
+    ".ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  }
+}

package/templates/react-aigne-dapp/src/app.tsx

@@ -0,0 +1,28 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+
+import Home from './pages/home';
+import { SessionProvider } from './contexts/session';
+
+function App() {
+  return (
+    <div className="app">
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </div>
+  );
+}
+
+export default function WrappedApp() {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const basename = window?.blocklet?.prefix || '/';
+
+  return (
+    <Router basename={basename}>
+      <SessionProvider>
+        <App />
+      </SessionProvider>
+    </Router>
+  );
+}

package/templates/react-aigne-dapp/src/assets/blocklet.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.152 10.6417L31.72 0L13.288 10.6417V24.7942L1 31.8887V53.1722L19.432 63.8139L31.6902 56.7366L31.72 56.7538L31.7498 56.7366L44.008 63.8139L62.44 53.1722V31.8887L50.152 24.7942V10.6417ZM60.52 32.9972L48.232 25.9027V11.7502L31.72 2.21703L15.208 11.7502V25.9028L2.92 32.9972V52.0636L19.432 61.5968L31.6902 54.5196L31.72 54.5368L31.7498 54.5196L44.008 61.5968L60.52 52.0636V32.9972Z" fill="url(#paint0_linear_2412_13557)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.1521 24.8307L31.7201 14.189L13.2881 24.8307V46.1141L31.7201 56.7558L50.1521 46.1141V24.8307ZM15.2081 25.9392L31.7201 16.406L48.2321 25.9392V45.0056L31.7201 54.5388L15.2081 45.0056V25.9392ZM28.5464 23.0464C28.6641 22.6342 29.0408 22.3501 29.4695 22.3501H33.9707C34.3993 22.3501 34.776 22.6342 34.8938 23.0464L35.7504 26.0447L37.8696 27.2681L40.8945 26.5109C41.3103 26.4068 41.7447 26.591 41.959 26.9622L44.2096 30.8604C44.424 31.2316 44.3662 31.6998 44.0682 32.0079L41.8999 34.2489V36.6959L44.0682 38.9369C44.3662 39.245 44.424 39.7133 44.2096 40.0845L41.959 43.9827C41.7447 44.3539 41.3103 44.538 40.8945 44.4339L37.8696 43.6767L35.7504 44.9002L34.8938 47.8984C34.776 48.3106 34.3993 48.5947 33.9707 48.5947H29.4695C29.0408 48.5947 28.6641 48.3106 28.5464 47.8984L27.6897 44.9002L25.5706 43.6767L22.5457 44.4339C22.1299 44.538 21.6955 44.3539 21.4812 43.9827L19.2305 40.0845C19.0162 39.7133 19.0739 39.245 19.372 38.9369L21.5402 36.6959V34.2489L19.372 32.0079C19.0739 31.6998 19.0162 31.2316 19.2305 30.8604L21.4812 26.9622C21.6955 26.591 22.1299 26.4068 22.5457 26.5109L25.5706 27.2681L27.6897 26.0447L28.5464 23.0464ZM28.9861 27.5132C29.2018 27.3887 29.3607 27.1851 29.4292 26.9456L30.1936 24.2701H33.2466L34.011 26.9456C34.0794 27.1851 34.2383 27.3887 34.4541 27.5132L37.2459 29.1251C37.4617 29.2497 37.7174 29.2855 37.9591 29.225L40.6583 28.5493L42.1848 31.1932L40.25 33.193C40.0768 33.372 39.9799 33.6114 39.9799 33.8605V37.0843C39.9799 37.3334 40.0768 37.5728 40.25 37.7518L42.1848 39.7516L40.6583 42.3955L37.9591 41.7198C37.7174 41.6593 37.4617 41.6951 37.2459 41.8197L34.4541 43.4316C34.2383 43.5561 34.0794 43.7597 34.011 43.9992L33.2466 46.6747H30.1936L29.4292 43.9992C29.3607 43.7597 29.2018 43.5561 28.9861 43.4316L26.1942 41.8197C25.9785 41.6951 25.7228 41.6593 25.4811 41.7198L22.7819 42.3955L21.2554 39.7516L23.1902 37.7518C23.3634 37.5728 23.4602 37.3334 23.4602 37.0843V33.8605C23.4602 33.6114 23.3634 33.372 23.1902 33.193L21.2554 31.1932L22.7819 28.5493L25.4811 29.225C25.7228 29.2855 25.9785 29.2497 26.1942 29.1251L28.9861 27.5132ZM31.7201 41.6407C28.3134 41.6407 25.5517 38.8791 25.5517 35.4724C25.5517 32.0657 28.3134 29.3041 31.7201 29.3041C35.1268 29.3041 37.8884 32.0657 37.8884 35.4724C37.8884 38.8791 35.1268 41.6407 31.7201 41.6407ZM35.9684 35.4724C35.9684 37.8187 34.0664 39.7207 31.7201 39.7207C29.3738 39.7207 27.4717 37.8187 27.4717 35.4724C27.4717 33.1261 29.3738 31.2241 31.7201 31.2241C34.0664 31.2241 35.9684 33.1261 35.9684 35.4724Z" fill="url(#paint1_linear_2412_13557)"/>
+<defs>
+<linearGradient id="paint0_linear_2412_13557" x1="31.72" y1="95.7208" x2="95.488" y2="34.3249" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2412_13557" x1="28.4374" y1="99.2464" x2="98.7613" y2="44.9372" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+</defs>
+<div xmlns="" mx-name="view-image-info"/></svg>

package/templates/react-aigne-dapp/src/components/MarkdownRenderer/index.tsx

@@ -0,0 +1,102 @@
+import { Box, styled } from '@mui/material';
+import { ComponentProps } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const MarkdownRenderer = styled(
+  (props: ComponentProps<typeof Markdown> & { citations?: { title?: string; url: string }[] }) => (
+    <Markdown
+      {...props}
+      remarkPlugins={[remarkGfm]}
+      components={{
+        table: ({ className, children }) => {
+          return (
+            <Box sx={{ overflow: 'auto', my: 1 }}>
+              <table className={className}>{children}</table>
+            </Box>
+          );
+        },
+        a: ({ href, children }) => {
+          return <a href={href}>{children}</a>;
+        },
+      }}>
+      {props.children}
+    </Markdown>
+  ),
+)`
+  width: 100%;
+  overflow: hidden;
+  word-break: break-word;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+
+  > * {
+    &:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-top: 0;
+    }
+    &:last-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-bottom: 0;
+    }
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  li p {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    white-space: nowrap;
+
+    th,
+    td {
+      border: 1px solid grey;
+      padding: 4px 8px;
+    }
+  }
+
+  a {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.writing:empty,
+  &.writing > *:last-child {
+    &:after {
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+      height: 1.2em;
+      margin-top: -0.2em;
+      margin-left: 0.1em;
+      border-right: 0.2em solid orange;
+      border-radius: 10px;
+      animation: blink-caret 0.75s step-end infinite;
+
+      @keyframes blink-caret {
+        from,
+        to {
+          border-color: transparent;
+        }
+        50% {
+          border-color: ${({ theme }) => theme.palette.secondary.main};
+        }
+      }
+    }
+  }
+`;
+
+export default MarkdownRenderer;