Add a copy button on code blocks displayed in the webviews

[frgfm]

🚀 Feature

We should add copy button for code blocks.

Most LLM chat services have it, typically this is how it looks like in ChatGPT:

Motivation & pitch

Since the goal of the chat interface is to speed up or remove bottlenecks for developers, it produces code quite often. We need to make that interaction more natural.

Alternatives

Here are some resources about how to do this (even though, it's not visually appealing):

• https://tecadmin.net/creating-code-blocks-with-copy-code-button-with-prism-js/
• https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
• https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/

Additional context

No response

[themujahidkhan]

Hi @frgfm

I want to work on this issue. Please assign it to me. By the way, what is the deadline?

[frgfm]

Hey there @themujahidkhan 👋

For sure, I was thinking about completing it by the end of next week! Would that be reasonable for you?

[themujahidkhan]

Hey @frgfm

Assign it to me, and I'll take my best shot. To complete within the given time frame

[themujahidkhan]

Hey @frgfm

I've implemented a copy-button for code blocks, but I'm getting many issues running the backend server; kindly give me a resource link or let me know how to fix this issue.

I saw this backend API repo, Link I followed the steps shown inside readme.md file. But that also didn't help. Can you please list in bullet points how to run the backend?

[frgfm]

Hey there 👋

Yeah sorry about this, I'm holding the documentation update PR for the release 😅
Long story short, you need three things:

• a Personal access token from GitHub (Generate a new token on GitHub, with no extra permissions = read-only)
• a .env file
• a docker-compose.yml file

In the env, put this (update the PAT, the rest can stay as is):

POSTGRES_DB=postgres
POSTGRES_USER=postgres
POSTGRES_PASSWORD='An0th3rDumm1PassW0rdz!'
SUPERADMIN_GH_PAT=your-github-pat
SUPERADMIN_LOGIN='JohnDoe'
SUPERADMIN_PWD='Dumm1PassW0rdz!'
GH_OAUTH_ID=your-github-oauth-app-id
GH_OAUTH_SECRET=your-github-oauth-app-secret
OLLAMA_MODEL='tinydolphin:1.1b-v2.8-q4_K_M'

the docker compose

version: '3.7'

services:
  backend:
    image: quackai/contribution-api:latest
    command: uvicorn app.main:app --reload --host 0.0.0.0 --port 8050 --proxy-headers
    ports:
      - "8050:8050"
    environment:
      - POSTGRES_URL=postgresql+asyncpg://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db/${POSTGRES_DB}
      - OLLAMA_ENDPOINT=http://ollama:11434
      - OLLAMA_MODEL=${OLLAMA_MODEL}
      - SECRET_KEY=${SECRET_KEY}
      - SUPERADMIN_GH_PAT=${SUPERADMIN_GH_PAT}
      - SUPERADMIN_LOGIN=${SUPERADMIN_LOGIN}
      - SUPERADMIN_PWD=${SUPERADMIN_PWD}
      - GH_OAUTH_ID=${GH_OAUTH_ID}
      - GH_OAUTH_SECRET=${GH_OAUTH_SECRET}
      - SUPPORT_EMAIL=${SUPPORT_EMAIL}
      - DEBUG=false
    depends_on:
      db:
        condition: service_healthy
      ollama:
        condition: service_healthy

  ollama:
    image: ollama/ollama:0.1.29
    command: serve
    volumes:
      - "$HOME/.ollama:/root/.ollama"
    expose:
      - 11434
    healthcheck:
      test: ["CMD-SHELL", "ollama pull '${OLLAMA_MODEL}'"]
      interval: 5s
      timeout: 1m
      retries: 3
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia
              count: 1
              capabilities: [gpu]

  db:
    image: postgres:15-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    expose:
      - 5432
    environment:
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
      - POSTGRES_DB=${POSTGRES_DB}
    healthcheck:
      test: ["CMD-SHELL", "sh -c 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}'"]
      interval: 10s
      timeout: 3s
      retries: 3

volumes:
  postgres_data:
  ollama:

and then

docker compose up -d

now you can update your API endpoint in the extension to http://localhost:8050. If you don't have a GPU, you should comment the "deploy" section in the docker compose. Let me know how it goes 😁

[themujahidkhan]

Hey @frgfm

Thanks for the quick response, BTW, What is this SUPERADMIN_LOGIN & SUPERADMIN_PWD, should I keep the values as it is that you've provided in the dummy .env file or do I've to get it from somewhere?

[frgfm]

You can keep the value as is:

• the Github PAT is used to identify you (the admin) with Github
• the login & pwd are used to link a credential access to your GitHub identity (merging those two if you will)

So in dev mode, no need to update them. You only need the GitHub PAT :)

[themujahidkhan]

Understood, I followed the updated steps which you've shared, but Unfortunately, I'm unable to access the backend as well unable to configure the endpoint