Changed all hotkeys combinations to alt+ctrl and added info in toolti…

package.json

@@ -31,6 +31,7 @@
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.1",
     "remark": "^15.0.1",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",

src/components/content/ConversationContent.tsx

@@ -2,8 +2,9 @@ import { useParams, useSearchParams } from "react-router"
 import { useSendMessage } from "../../api/sse.ts"
 
 import { ArrowDownIcon } from "@navikt/aksel-icons"
-import { Alert as AlertComponent, Button, Heading } from "@navikt/ds-react"
+import { Alert as AlertComponent, Button, Heading, Tooltip } from "@navikt/ds-react"
 import { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
 import Markdown from "react-markdown"
 import { useAlerts, useMessages } from "../../api/api.ts"
 import { NewMessage } from "../../types/Message.ts"
@@ -107,7 +108,9 @@ function ConversationContent() {
     })
   }
 
-  // useHotkeys("ctrl+b", () => scrollToBottom())
+  useHotkeys("alt+ctrl+B", () => scrollToBottom(), {
+    enableOnFormTags: true,
+  })
 
   return (
     <div className='conversation-content'>
@@ -129,14 +132,17 @@ function ConversationContent() {
           )}
         </div>
         {showScrollButton && (
-          <Button
-            icon={<ArrowDownIcon />}
-            className='fixed left-1/2 -translate-x-1/2'
-            style={{ bottom: dynamicBottom }}
-            variant='primary-neutral'
-            size='small'
-            onClick={scrollToBottom}
-          />
+          <Tooltip content='Scroll til bunnen ( Alt+Ctrl+B )'>
+            <Button
+              icon={<ArrowDownIcon />}
+              className='fixed left-1/2 -translate-x-1/2'
+              style={{ bottom: dynamicBottom }}
+              variant='primary-neutral'
+              size='small'
+              onClick={scrollToBottom}
+              aria-label='Scroll til bunnen'
+            />
+          </Tooltip>
         )}
         <InputField
           onSend={handleUserMessage}

src/components/content/chat/ChatContainer.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from "react"
+import React, { Fragment, useEffect, useRef, useState } from "react"
 import { useSearchParams } from "react-router"
 import { Message, NewMessage } from "../../../types/Message.ts"
 import { BobAnswerBubble } from "./chatbubbles/answerbubble/BobAnswerBubble.tsx"
@@ -45,8 +45,18 @@ function ChatContainer({ messages, onSend, isLoading }: ChatDialogProps) {
     prevMessagesLength.current = messages.length
   }, [messages, lastMessageRef, selectedMessageRef])
 
+  const handleCopy: React.ClipboardEventHandler<HTMLDivElement> = (e) => {
+    const sel = window.getSelection()?.toString()
+    if (!sel) return
+    e.preventDefault()
+    e.clipboardData.setData("text/plain", sel.trimEnd())
+  }
+
   return (
-    <div className='dialogcontent h-auto grow flex-col px-4 pt-4'>
+    <div
+      className='dialogcontent h-auto grow flex-col px-4 pt-4'
+      onCopy={handleCopy}
+    >
       {messages.map((message, index) =>
         message.messageRole === "human" ? (
           <Fragment key={message.id}>

src/components/content/chat/chatbubbles/BobAnswerCitations.tsx

@@ -1,12 +1,5 @@
 import { ExternalLinkIcon } from "@navikt/aksel-icons"
-import {
-  BodyLong,
-  BodyShort,
-  Detail,
-  Label,
-  Link,
-  Tooltip,
-} from "@navikt/ds-react"
+import { BodyLong, BodyShort, Detail, Label, Link, Tooltip } from "@navikt/ds-react"
 import Markdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import { KunnskapsbasenIcon } from "../../../../assets/icons/KunnskapsbasenIcon.tsx"
@@ -46,16 +39,13 @@ function BobAnswerCitations({ citation, context }: BobAnswerCitationProps) {
 
 export default BobAnswerCitations
 
-const SingleCitation = ({
-  citation,
-  context,
-}: {
-  citation: Citation
-  context: Context | undefined
-}) => {
+const SingleCitation = ({ citation, context }: { citation: Citation; context: Context | undefined }) => {
   return (
     <div className='mb-2 flex flex-col'>
-      <Label size='small' className='mb-1'>
+      <Label
+        size='small'
+        className='mb-1'
+      >
         {context ? (
           <div className='flex flex-wrap gap-2'>
             <CitationLink
@@ -65,18 +55,23 @@ const SingleCitation = ({
             <SourceIcon source={context.source} />
           </div>
         ) : (
-          <BodyShort size='medium'>
-            Kunne ikke finne lenke til artikkelen.
-          </BodyShort>
+          <BodyShort size='medium'>Kunne ikke finne lenke til artikkelen.</BodyShort>
         )}
       </Label>
-      <BodyLong size='small' className='mt-1 italic'>
+      <BodyLong
+        size='small'
+        className='mt-1 italic'
+      >
         <Markdown
           className='markdown'
           remarkPlugins={[remarkGfm]}
           components={{
             a: ({ ...props }) => (
-              <a {...props} target='_blank' rel='noopener noreferrer' />
+              <a
+                {...props}
+                target='_blank'
+                rel='noopener noreferrer'
+              />
             ),
           }}
         >
@@ -101,10 +96,16 @@ const MultiCitation = ({
   const articleLink = contexts.at(citations[0]!.sourceId)!.url
   return (
     <div className='mb-2 flex flex-col'>
-      <Label size='small' className='mb-1'>
+      <Label
+        size='small'
+        className='mb-1'
+      >
         <div className='flex flex-wrap gap-2'>
           <Tooltip content='Åpner artikkelen i ny fane'>
-            <Link href={articleLink} target='_blank'>
+            <Link
+              href={articleLink}
+              target='_blank'
+            >
               {title}
               <ExternalLinkIcon />
             </Link>
@@ -121,7 +122,11 @@ const MultiCitation = ({
                 remarkPlugins={[remarkGfm]}
                 components={{
                   a: ({ ...props }) => (
-                    <a {...props} target='_blank' rel='noopener noreferrer' />
+                    <a
+                      {...props}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    />
                   ),
                 }}
               >
@@ -165,19 +170,13 @@ const CitationLink = ({
 
   // Encoding for RFC3986 - making text fragments to work for citations with unreserved marks //
   function encodeFragment(text: string) {
-    return encodeURIComponent(text).replace(
-      /[-!'()*#]/g,
-      (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
-    )
+    return encodeURIComponent(text).replace(/[-!'()*#]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`)
   }
 
   // Expands all panels on the nav.no-page //
-  const expandAll =
-    matchingContextCitationData?.source === "navno" ? "?expandall=true" : ""
+  const expandAll = matchingContextCitationData?.source === "navno" ? "?expandall=true" : ""
 
-  const useAnchor = matchingContextCitationData?.url.includes(
-    "/saksbehandlingstider",
-  )
+  const useAnchor = matchingContextCitationData?.url.includes("/saksbehandlingstider")
 
   return (
     <Tooltip content='Åpner artikkelen i ny fane'>

src/components/content/chat/chatbubbles/UserQuestionBubble.tsx

@@ -1,10 +1,12 @@
 import { Message } from "../../../../types/Message.ts"
 
 import { PencilWritingIcon } from "@navikt/aksel-icons"
-import { BodyLong, Button, Heading, Tooltip } from "@navikt/ds-react"
+import { Button, Heading, Tooltip } from "@navikt/ds-react"
 import { memo } from "react"
 import Markdown from "react-markdown"
 import rehypeRaw from "rehype-raw"
+import remarkBreaks from "remark-breaks"
+import remarkGfm from "remark-gfm"
 import analytics from "../../../../utils/analytics.ts"
 import { useInputFieldStore } from "../../../inputfield/InputField.tsx"
 import "./ChatBubbles.css"
@@ -15,7 +17,8 @@ interface UserChatBubbleProps {
 
 const UserQuestionBubble = memo(
   ({ userQuestion }: UserChatBubbleProps) => {
-    const question = userQuestion?.content.replace(/\n/g, "<br>")
+    const raw = userQuestion?.content?.trimEnd() ?? ""
+    // const question = userQuestion?.content.replace(/\n/g, "<br>")
 
     const { setInputValue, focusTextarea } = useInputFieldStore()
 
@@ -28,7 +31,7 @@ const UserQuestionBubble = memo(
     }
 
     return (
-      <div className='questionhover mb-2 flex w-fit flex-row items-end gap-1 self-end'>
+      <div className='questionhover mb-4 flex w-fit flex-row items-end gap-1 self-end'>
         <div className='hide-show-edit fade-in hidden'>
           <Tooltip
             content='Rediger spørsmålet'
@@ -51,9 +54,12 @@ const UserQuestionBubble = memo(
           >
             Du spurte:
           </Heading>
-          <BodyLong>
-            <Markdown rehypePlugins={[rehypeRaw]}>{question}</Markdown>
-          </BodyLong>
+          <Markdown
+            remarkPlugins={[remarkGfm, remarkBreaks]}
+            rehypePlugins={[rehypeRaw]}
+          >
+            {raw}
+          </Markdown>
         </div>
       </div>
     )

src/components/content/chat/chatbubbles/answerbubble/BobAnswerBubble.tsx

@@ -164,49 +164,47 @@ const MessageContent = ({
   }
 
   return (
-    <VStack gap='5'>
+    <div className='flex flex-col gap-5'>
       <Heading
         size='small'
         className='sr-only top-0'
         level='2'
       >
         Svar fra Bob:
       </Heading>
-      <BodyLong className='fade-in'>
-        <Markdown
-          className='markdown'
-          remarkPlugins={[md.remarkCitations]}
-          rehypePlugins={[rehypeRaw]}
-          components={{
-            a: ({ ...props }) => (
-              <a
-                {...props}
-                target='_blank'
-                rel='noopener noreferrer'
-              />
-            ),
-            span: (props: CitationSpanProps) => {
-              const dataCitation = props["data-citation"]
-              const dataPosition = props["data-position"]
-              if (dataCitation && dataPosition) {
-                const citationId = parseInt(dataCitation, 10)
-                addCitation(citationId, parseInt(dataPosition, 10))
-                return (
-                  <CitationNumber
-                    citations={citations}
-                    citationId={citationId}
-                    context={message.context}
-                  />
-                )
-              }
-              return <span {...props} />
-            },
-          }}
-        >
-          {message.content}
-        </Markdown>
-      </BodyLong>
-    </VStack>
+      <Markdown
+        className='markdown'
+        remarkPlugins={[md.remarkCitations]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          a: ({ ...props }) => (
+            <a
+              {...props}
+              target='_blank'
+              rel='noopener noreferrer'
+            />
+          ),
+          span: (props: CitationSpanProps) => {
+            const dataCitation = props["data-citation"]
+            const dataPosition = props["data-position"]
+            if (dataCitation && dataPosition) {
+              const citationId = parseInt(dataCitation, 10)
+              addCitation(citationId, parseInt(dataPosition, 10))
+              return (
+                <CitationNumber
+                  citations={citations}
+                  citationId={citationId}
+                  context={message.context}
+                />
+              )
+            }
+            return <span {...props} />
+          },
+        }}
+      >
+        {message.content}
+      </Markdown>
+    </div>
   )
 }