Refactor components for improved readability and performance (#72)

- Replaced `img` with `Image` component in multiple files for better image handling.
- Simplified `useMemo` dependencies in `message.tsx`.
- Adjusted formatting and spacing in `session-view.tsx` and `welcome-view.tsx` for consistency.
- Cleaned up unnecessary imports and improved JSX structure across various components.

Author: codeSTACKr

complex-agents/avatars/anam/frontend/components/agents-ui/react-shader-toy.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, type ComponentPropsWithoutRef } from 'react';
+import React, { type ComponentPropsWithoutRef, useEffect, useRef } from 'react';
+
 const PRECISIONS = ['lowp', 'mediump', 'highp'];
 const FS_MAIN_SHADER = `\nvoid main(void){
     vec4 color = vec4(0.0,0.0,0.0,1.0);
@@ -40,7 +41,7 @@ const processUniform = <T extends UniformType>(
   gl: WebGLRenderingContext,
   location: WebGLUniformLocation,
   t: T,
-  value: number | number[],
+  value: number | number[]
 ) => {
   if (isVectorType(t, value)) {
     switch (t) {
@@ -134,18 +135,14 @@ const uniformTypeToGLSLType = (t: string) => {
       return 'mat4';
     default:
       console.error(
-        log(`The uniform type "${t}" is not valid, please make sure your uniform type is valid`),
+        log(`The uniform type "${t}" is not valid, please make sure your uniform type is valid`)
       );
   }
 };
 
 const LinearFilter = 9729;
 const NearestFilter = 9728;
 const LinearMipMapLinearFilter = 9987;
-const NearestMipMapLinearFilter = 9986;
-const LinearMipMapNearestFilter = 9985;
-const NearestMipMapNearestFilter = 9984;
-const MirroredRepeatWrapping = 33648;
 const ClampToEdgeWrapping = 33071;
 const RepeatWrapping = 10497;
 
@@ -198,15 +195,15 @@ class Texture {
         this.height = video.videoHeight || 0;
         checkReady();
       },
-      true,
+      true
     );
     video.addEventListener(
       'timeupdate',
       () => {
         timeupdate = true;
         checkReady();
       },
-      true,
+      true
     );
     video.src = url;
     return video;
@@ -224,8 +221,8 @@ class Texture {
       context?.drawImage(image, 0, 0, this.pow2canvas.width, this.pow2canvas.height);
       console.warn(
         log(
-          `Image is not power of two ${image.width} x ${image.height}. Resized to ${this.pow2canvas.width} x ${this.pow2canvas.height};`,
-        ),
+          `Image is not power of two ${image.width} x ${image.height}. Resized to ${this.pow2canvas.width} x ${this.pow2canvas.height};`
+        )
       );
       return this.pow2canvas as T;
     }
@@ -236,16 +233,14 @@ class Texture {
     const { url, wrapS, wrapT, minFilter, magFilter, flipY = -1 }: TextureParams = textureArgs;
     if (!url) {
       return Promise.reject(
-        new Error(
-          log('Missing url, please make sure to pass the url of your texture { url: ... }'),
-        ),
+        new Error(log('Missing url, please make sure to pass the url of your texture { url: ... }'))
       );
     }
     const isImage = /(\.jpg|\.jpeg|\.png|\.gif|\.bmp)$/i.exec(url);
     const isVideo = /(\.mp4|\.3gp|\.webm|\.ogv)$/i.exec(url);
     if (isImage === null && isVideo === null) {
       return Promise.reject(
-        new Error(log(`Please upload a video or an image with a valid format (url: ${url})`)),
+        new Error(log(`Please upload a video or an image with a valid format (url: ${url})`))
       );
     }
     Object.assign(this, { url, wrapS, wrapT, minFilter, magFilter, flipY });
@@ -268,7 +263,7 @@ class Texture {
       border,
       srcFormat,
       srcType,
-      pixel,
+      pixel
     );
     if (isVideo) {
       const video = this.setupVideo(url);
@@ -320,7 +315,7 @@ class Texture {
     gl.texParameteri(
       gl.TEXTURE_2D,
       gl.TEXTURE_MIN_FILTER,
-      this.minFilter || LinearMipMapLinearFilter,
+      this.minFilter || LinearMipMapLinearFilter
     );
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.magFilter || LinearFilter);
     this._webglTexture = texture;
@@ -501,7 +496,7 @@ export function ReactShaderToy({
     glRef.current = (canvasRef.current.getContext('webgl', contextAttributes) ||
       canvasRef.current.getContext(
         'experimental-webgl',
-        contextAttributes,
+        contextAttributes
       )) as WebGLRenderingContext | null;
     glRef.current?.getExtension('OES_standard_derivatives');
     glRef.current?.getExtension('EXT_shader_texture_lod');
@@ -619,15 +614,15 @@ export function ReactShaderToy({
     if (!gl.getProgramParameter(shaderProgramRef.current, gl.LINK_STATUS)) {
       onError?.(
         log(
-          `Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgramRef.current)}`,
-        ),
+          `Unable to initialize the shader program: ${gl.getProgramInfoLog(shaderProgramRef.current)}`
+        )
       );
       return;
     }
     gl.useProgram(shaderProgramRef.current);
     vertexPositionAttributeRef.current = gl.getAttribLocation(
       shaderProgramRef.current,
-      'aVertexPosition',
+      'aVertexPosition'
     );
     gl.enableVertexAttribArray(vertexPositionAttributeRef.current);
   };
@@ -693,8 +688,8 @@ export function ReactShaderToy({
     if (!isValidPrecision) {
       onWarning?.(
         log(
-          `wrong precision type ${precision}, please make sure to pass one of a valid precision lowp, mediump, highp, by default you shader precision will be set to highp.`,
-        ),
+          `wrong precision type ${precision}, please make sure to pass one of a valid precision lowp, mediump, highp, by default you shader precision will be set to highp.`
+        )
       );
     }
     let fragmentShader = precisionString
@@ -707,7 +702,7 @@ export function ReactShaderToy({
         fragmentShader = insertStringAtIndex(
           fragmentShader,
           `uniform ${u.type} ${uniform}${u.arraySize || ''}; \n`,
-          fragmentShader.lastIndexOf(precisionString) + precisionString.length,
+          fragmentShader.lastIndexOf(precisionString) + precisionString.length
         );
         u.isNeeded = true;
       }
@@ -735,7 +730,7 @@ export function ReactShaderToy({
             gl,
             customUniformLocation,
             currentUniform.type as UniformType,
-            currentUniform.value,
+            currentUniform.value
           );
         }
       }
@@ -747,18 +742,18 @@ export function ReactShaderToy({
     if (uniformsRef.current.iChannelResolution?.isNeeded) {
       const channelResUniform = gl.getUniformLocation(
         shaderProgramRef.current,
-        UNIFORM_CHANNELRESOLUTION,
+        UNIFORM_CHANNELRESOLUTION
       );
       gl.uniform3fv(channelResUniform, uniformsRef.current.iChannelResolution.value as number[]);
     }
     if (uniformsRef.current.iDeviceOrientation?.isNeeded) {
       const deviceOrientationUniform = gl.getUniformLocation(
         shaderProgramRef.current,
-        UNIFORM_DEVICEORIENTATION,
+        UNIFORM_DEVICEORIENTATION
       );
       gl.uniform4fv(
         deviceOrientationUniform,
-        uniformsRef.current.iDeviceOrientation.value as number[],
+        uniformsRef.current.iDeviceOrientation.value as number[]
       );
     }
     if (uniformsRef.current.iTime?.isNeeded) {

complex-agents/avatars/anam/frontend/components/ai-elements/message.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
-import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import Image from 'next/image';
 import type { FileUIPart, UIMessage } from 'ai';
 import { ChevronLeftIcon, ChevronRightIcon, PaperclipIcon, XIcon } from 'lucide-react';
 import { Streamdown } from 'streamdown';
@@ -155,9 +156,11 @@ export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
 
 export const MessageBranchContent = ({ children, ...props }: MessageBranchContentProps) => {
   const { currentBranch, setBranches, branches } = useMessageBranch();
-  const childrenArray = Array.isArray(children) ? children : [children];
+  const childrenArray = useMemo(
+    () => (Array.isArray(children) ? children : [children]),
+    [children]
+  );
 
-  // Use useEffect to update branches when they change
   useEffect(() => {
     if (branches.length !== childrenArray.length) {
       setBranches(childrenArray);
@@ -187,16 +190,19 @@ export const MessageBranchSelector = ({
   from,
   ...props
 }: MessageBranchSelectorProps) => {
+  void from; // reserved for future use (e.g. styling by role)
   const { totalBranches } = useMessageBranch();
 
-  // Don't render if there's only one branch
   if (totalBranches <= 1) {
     return null;
   }
 
   return (
     <ButtonGroup
-      className="[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md"
+      className={cn(
+        '[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md',
+        className
+      )}
       orientation="horizontal"
       {...props}
     />
@@ -231,6 +237,7 @@ export const MessageBranchNext = ({ children, className, ...props }: MessageBran
   return (
     <Button
       aria-label="Next branch"
+      className={className}
       disabled={totalBranches <= 1}
       onClick={goToNext}
       size="icon-sm"
@@ -288,12 +295,13 @@ export function MessageAttachment({ data, className, onRemove, ...props }: Messa
     <div className={cn('group relative size-24 overflow-hidden rounded-lg', className)} {...props}>
       {isImage ? (
         <>
-          <img
+          <Image
             alt={filename || 'attachment'}
             className="size-full object-cover"
             height={100}
             src={data.url}
             width={100}
+            unoptimized
           />
           {onRemove && (
             <Button

complex-agents/avatars/anam/frontend/components/app/session-view.tsx

@@ -14,7 +14,11 @@ interface SessionViewProps {
 
 const POST_SUBMIT_FALLBACK_MS = 90_000;
 
-export const SessionView = ({ appConfig, ...props }: React.ComponentProps<'section'> & SessionViewProps) => {
+export const SessionView = ({
+  appConfig,
+  ...props
+}: React.ComponentProps<'section'> & SessionViewProps) => {
+  void appConfig; // passed for type/API consistency; may be used later
   const { end, room, isConnected } = useSessionContext();
   const agent = useAgent();
   const [formData, setFormData] = useState<IntakeFormData>(EMPTY_FORM_DATA);

complex-agents/avatars/anam/frontend/components/app/welcome-view.tsx

@@ -1,11 +1,14 @@
+import Image from 'next/image';
 import { Button } from '@/components/ui/button';
 
 function WelcomeImage() {
   return (
     <div className="mb-4 size-64 overflow-hidden rounded-lg border-4 border-gray-200 dark:border-gray-800">
-      <img
+      <Image
         src="/liv.jpg"
         alt="Liv AI assistant"
+        width={256}
+        height={256}
         className="size-full object-cover"
       />
     </div>
@@ -28,7 +31,9 @@ export const WelcomeView = ({
         <WelcomeImage />
 
         <p className="text-foreground max-w-prose pt-1 leading-6 font-medium">
-          Complete your healthcare intake<br />Powered by Anam + LiveKit
+          Complete your healthcare intake
+          <br />
+          Powered by Anam + LiveKit
         </p>
 
         <Button