Backstage Q&A Plugin

yarn workspace backend add @drodil/backstage-plugin-qeta-backend

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();
// other plugins
backend.add(import('@drodil/backstage-plugin-qeta-backend'));
backend.start();

yarn workspace backend add @drodil/[email protected]

// packages/backend/src/plugins/qeta.ts
import {
  createRouter,
  DatabaseQetaStore,
} from '@drodil/backstage-plugin-qeta-backend';
import { PluginEnvironment } from '../types';

export default async function createPlugin({
  logger,
  database,
  identity,
  config,
}: PluginEnvironment) {
  const db = await DatabaseQetaStore.create({ database });
  return await createRouter({
    logger,
    database: db,
    identity,
    config,
  });
}

// packages/backend/src/index.ts
import qeta from './plugins/qeta';

// inside createEnv and apiRouter setup
const qetaEnv = useHotMemoize(module, () => createEnv('qeta'));
apiRouter.use('/qeta', await qeta(qetaEnv));

yarn workspace app add @drodil/backstage-plugin-qeta @drodil/backstage-plugin-qeta-react

// packages/app/src/App.tsx
import React from 'react';
import { FlatRoutes, Route } from '@backstage/core-app-api';
import { QetaPage } from '@drodil/backstage-plugin-qeta';

export const AppRoutes = () => (
  <FlatRoutes>
    {/* other routes */}
    <Route path="/qeta" element={<QetaPage title="Questions" />} />
  </FlatRoutes>
);

// packages/app/src/components/Root/Root.tsx
import React, { PropsWithChildren } from 'react';
import LiveHelpIcon from '@material-ui/icons/LiveHelp';
import { SidebarItem, SidebarPage } from '@backstage/core-components';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    {/* other items */}
    <SidebarItem icon={LiveHelpIcon} to="qeta" text="Q&A" />
    {children}
  </SidebarPage>
);

// packages/app/src/components/catalog/EntityPage/content/QetaContent.tsx
import React from 'react';
import { useEntity } from '@backstage/plugin-catalog-react';
import { Container } from '@material-ui/core';
import { stringifyEntityRef } from '@backstage/catalog-model';
import { PostsContainer } from '@drodil/backstage-plugin-qeta-react';

export const QetaContent = () => {
  const { entity } = useEntity();

  return (
    <Container>
      <PostsContainer
        entity={stringifyEntityRef(entity)}
        showTitle
        showAskButton
        type="question" // or "article"
      />
    </Container>
  );
};

// packages/app/src/components/catalog/EntityPage.tsx
<EntityLayout.Route path="/qeta" title="Q&A">
  <QetaContent />
</EntityLayout.Route>

import { PostsGrid } from '@drodil/backstage-plugin-qeta-react';

// inside QetaContent return
<PostsGrid entity={stringifyEntityRef(entity)} showTitle showAskButton type="question" />

// packages/app/src/components/home/HomePage.tsx
import React from 'react';
import { QuestionTableCard } from '@drodil/backstage-plugin-qeta';
import { CustomHomepageGrid } from '@backstage/plugin-home';
import { Content, Page } from '@backstage/core-components';

export const HomePage = (
  <Page themeId="home">
    <Content>
      <CustomHomepageGrid>
        <QuestionTableCard />
      </CustomHomepageGrid>
    </Content>
  </Page>
);

// packages/app/src/components/search/SearchPage.tsx
import React from 'react';
import { Page } from '@backstage/core-components';
import { SearchBar, SearchContextProvider, SearchResult } from '@backstage/plugin-search-react';
import { QetaSearchResultListItem } from '@drodil/backstage-plugin-qeta';

export const SearchPage = (
  <Page themeId="home">
    <SearchContextProvider>
      <SearchBar />
      <SearchResult>
        <QetaSearchResultListItem />
      </SearchResult>
    </SearchContextProvider>
  </Page>
);

yarn workspace backend add @drodil/backstage-plugin-search-backend-module-qeta

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';
import { searchPlugin } from '@backstage/plugin-search-backend/alpha';

const backend = createBackend();
backend.add(searchPlugin());
backend.add(import('@drodil/backstage-plugin-search-backend-module-qeta'));
backend.start();

# app-config.yaml
qeta:
  permissions: false
  notifications: true
  storage:
    type: database

qeta:
  allowAnonymous: false
  entities:
    kinds: [Component]
    max: 3
  tags:
    allowCreation: true
    max: 5
  mentions:
    supportedKinds:
      - User
      - Group
  storage:
    disabled: false
    allowedMimeTypes:
      - png
      - jpg
      - jpeg
      - gif

yarn workspace backend add @drodil/backstage-plugin-qeta-backend-module-openai

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';
const backend = createBackend();
// other plugins
backend.add(import('@drodil/backstage-plugin-qeta-backend-module-openai'));
backend.start();

# app-config.yaml
qeta:
  openai:
    apiKey: ${OPENAI_API_KEY}
    model: gpt-4o-mini
    temperature: 0.5
    maxTokens: 100
    answer:
      newQuestions: true
      existingQuestions: true
      articleSummary: false
    post:
      tagSuggestions: false

// example backend module
import { createBackendModule } from '@backstage/backend-plugin-api';
import { qetaAIExtensionPoint } from '@drodil/backstage-plugin-qeta-node';

export const qetaAiModule = createBackendModule({
  pluginId: 'qeta',
  moduleId: 'custom-ai',
  register(reg) {
    reg.registerInit({
      deps: { ai: qetaAIExtensionPoint },
      async init({ ai }) {
        ai.setAIHandler({
          async answerExistingQuestion(question) {
            return { answer: 'Answer' };
          },
          async answerNewQuestion(title, content) {
            return { answer: 'Answer' };
          },
          async summarizeArticle(article) {
            return { answer: 'Summary' };
          },
          async suggestTags(title, content) {
            return { tags: ['example'] };
          },
        });
      },
    });
  },
});

backend.add(import('./path/to/qetaAiModule'));